Wie stellt man die Barrierefreiheit (A11y) sicher, damit Screenreader die Hierarchie eines visuellen Trichters verstehen?

Melden

Die Barrierefreiheit eines visuellen Trichters (Funnels) ist eine Herausforderung, da Trichter Informationen oft gleichzeitig durch Form, Farbe und Text vermitteln. Screenreader lesen jedoch linear.

Um die Hierarchie und den Prozessfluss korrekt zu vermitteln, sollten Sie diese Strategien anwenden:

1. Semantische Struktur (Das Fundament)

Verlassen Sie sich nicht auf die rein visuelle Anordnung. Nutzen Sie HTML-Elemente, die eine Reihenfolge implizieren.

  • Geordnete Listen (<ol>): Ein Trichter ist ein Prozess. Eine geordnete Liste signalisiert dem Screenreader automatisch die Anzahl der Schritte und die aktuelle Position ("Schritt 1 von 4").
  • Überschriften-Hierarchie: Nutzen Sie <h2> bis <h6>, um den Trichter-Bereich klar abzugrenzen.

2. ARIA-Attribute für den Kontext

Wenn das visuelle Design vom Standard-HTML abweicht, helfen ARIA-Attribute:

  • aria-label / aria-labelledby: Geben Sie dem gesamten Trichter-Container einen Namen (z. B. aria-label="Sales Funnel Q3").
  • aria-current="step": Wenn der Trichter den aktuellen Status eines Benutzers anzeigt, markieren Sie den aktiven Schritt damit.
  • aria-describedby: Verknüpfen Sie einzelne Stufen mit detaillierten Beschreibungen oder Prozentangaben, die vielleicht räumlich getrennt stehen.

3. Den "Drop-off" (Datenverlust) beschreiben

Visuell sieht man, dass der Trichter nach unten schmaler wird. Ein Screenreader-Nutzer braucht diese Information textlich:

  • Daten-Tabelle (Hidden or Toggle): Die beste Methode für komplexe Trichter ist eine begleitende Datentabelle. Sie können diese visuell verbergen (Klasse .sr-only), aber für Screenreader zugänglich lassen.
  • Textuelle Zusammenfassung: Ergänzen Sie jeden Schritt um die relative Änderung.
    • Schlecht: "Schritt 2: Warenkorb - 500 Nutzer"
    • Gut: "Schritt 2: Warenkorb. 500 Nutzer, das sind 50% weniger als im vorherigen Schritt."

4. Umgang mit SVGs und Grafiken

Falls der Trichter als SVG eingebunden ist:

  • role="img" und <title>: Geben Sie dem SVG eine Rolle und einen Titel.
  • aria-hidden="true" für Dekoration: Wenn die Grafik nur schmückendes Beiwerk ist und die Daten daneben als Text stehen, verstecken Sie die Grafik komplett für Screenreader.
  • Fokus-Management: Achten Sie darauf, dass interaktive Trichterelemente (z. B. anklickbare Stufen) mit der Tastatur erreichbar sind (tabindex="0" und role="button").

5. Konkretes Code-Beispiel (Best Practice)

<section aria-labelledby="funnel-title">
  <h2 id="funnel-title">Conversion Trichter</h2>

  <!-- Visuell versteckte, aber für Screenreader lesbare Zusammenfassung -->
  <p class="sr-only">Der Trichter zeigt den Nutzerfluss von der Startseite bis zum Kauf. Die größte Abwanderung findet beim Checkout statt.</p>

  <ol class="funnel-container">
    <li>
      <div class="funnel-step">
        <span class="step-name">Besucher</span>
        <span class="step-value">10.000 (100%)</span>
      </div>
    </li>
    <li>
      <div class="funnel-step">
        <span class="step-name">Produkt angesehen</span>
        <span class="step-value">2.000 (20% von Besuchern)</span>
      </div>
    </li>
    <li aria-current="step">
      <div class="funnel-step">
        <span class="step-name">Warenkorb</span>
        <span class="step-value">500 (25% von Produkt angesehen)</span>
      </div>
    </li>
    <!-- ... weitere Schritte -->
  </ol>
</section>

Checkliste für die Barrierefreiheit:

  1. Reihenfolge: Entspricht die Tab-Reihenfolge dem visuellen Fluss (oben nach unten)?
  2. Kontrast: Haben die verschiedenen Stufen des Trichters genug Kontrast zum Text und zueinander?
  3. Skalierbarkeit: Ist der Text auch bei 200% Zoom noch lesbar, ohne dass sich die Trichterstufen überlagern?
  4. Farbe allein reicht nicht: Kennzeichnen Sie Stufen nicht nur durch Farben (z.B. Rot für hohen Verlust), sondern nutzen Sie Text oder Icons mit aria-label.

Pro-Tipp: Testen Sie den Trichter mit einem echten Screenreader (NVDA, JAWS oder VoiceOver). Wenn Sie nur durch das Hören verstehen, wie viele Leute wo "aussteigen", ist die Hierarchie korrekt implementiert.

0