Barrierefreies Karussell (Slider)

Der Hero-Slider auf der Startseite und Karussells mit Produktbildern gehören zu den meistkritisierten Mustern der Barrierefreiheit – zum einen, weil sie oft schlecht gebaut sind, zum anderen, weil sich kaum jemand über die erste Folie hinaus ansieht. Wenn Sie eines einsetzen, machen Sie es steuerbar. Diese Seite gehört zur Reihe barrierefreie UI-Muster.

Wann ein Karussell passt

Das APG beschreibt ein Karussell als Darstellung von „einer Menge von Elementen, den Folien, indem nacheinander eine Teilmenge von einer oder mehreren Folien angezeigt wird“. Setzen Sie es für Produktbilder auf einer Produktseite oder eine kurze Reihe zusammengehöriger Elemente ein. Wenn jede Aktion zählt, überlegen Sie, sie als einzelne Blöcke zu zeigen: Nichts ist verborgen und nichts bewegt sich.

Das APG nennt zwei konkrete Probleme: Verborgene Folien dürfen für Screenreader nicht verfügbar bleiben (zum Beispiel, wenn sie nur aus dem Bild geschoben werden), und ein nicht angekündigter Wechsel verwirrt Screenreader-Nutzer, die plötzlich in Inhalten einer anderen Folie landen.

Relevante WCAG-Kriterien

• 2.2.2 Pausieren, beenden, ausblenden (A): Bewegte Inhalte, die „(1) automatisch starten, (2) länger als fünf Sekunden dauern und (3) parallel zu anderen Inhalten präsentiert werden“, brauchen „einen Mechanismus, mit dem der Nutzer sie pausieren, beenden oder ausblenden kann“. Das W3C nennt automatisch fortschreitende Präsentationen unter den Beispielen.
• 2.1.1 Tastatur (A): Alle Bedienelemente funktionieren per Tastatur; Wischen ist nicht der einzige Weg.
• 2.5.1 Zeigergesten (A): Wischen braucht eine Alternative mit einem einzelnen Zeiger, etwa Buttons für „weiter“ und „zurück“.
• 1.1.1 Nicht-Text-Inhalt (A): Folienbilder haben Textalternativen; Text in Banner-Bildern muss ebenfalls in der Alternative stehen.
• 1.4.5 Bilder eines Textes (AA): Werbetext sollte echter Text sein, nicht ins Bild eingebrannt.
• 4.1.2 Name, Rolle, Wert (A): Buttons haben Namen; die Auswahl zeigt die aktuelle Folie.
• 2.5.8 Zielgröße (Minimum) (AA): Punkt-Indikatoren liegen oft weit unter 24 × 24 CSS-Pixeln.
• 2.4.3 Fokus-Reihenfolge (A): Verborgene Folien erhalten keinen Fokus.

Codebeispiel

<section class="carousel" aria-roledescription="carousel" aria-label="Herbstangebote">
  <button type="button" class="rotation" aria-label="Foliendurchlauf anhalten">⏸</button>
  <button type="button" aria-controls="slides" aria-label="Vorherige Folie">‹</button>
  <button type="button" aria-controls="slides" aria-label="Nächste Folie">›</button>

  <div id="slides" aria-live="off" aria-atomic="false">
    <div role="group" aria-roledescription="slide" aria-label="1 von 3">
      <a href="/de/herbstjacken">
        <img src="jackets.jpg" alt="Herbstjacken, 20 % Rabatt bis Sonntag">
      </a>
    </div>
    <div role="group" aria-roledescription="slide" aria-label="2 von 3" hidden>…</div>
    <div role="group" aria-roledescription="slide" aria-label="3 von 3" hidden>…</div>
  </div>
</section>

Was das APG festlegt:

• Der Container ist eine region (ein section mit Namen) oder eine group mit aria-roledescription="carousel" und einer Beschriftung, die das Wort „Karussell“ nicht enthält.
• Jede Folie ist eine group mit aria-roledescription="slide" und einem Namen; haben Folien keine eindeutigen Namen, funktioniert eine Position wie „3 von 10“.
• Der Folien-Wrapper hat aria-atomic="false"; aria-live ist off, solange das Karussell automatisch wechselt, und polite, wenn nicht, damit manuelle Wechsel angesagt werden.
• Die Beschriftung des Rotations-Buttons beschreibt die Aktion – „Foliendurchlauf anhalten“ oder „Foliendurchlauf starten“ –, sodass er kein aria-pressed braucht.
• Der Wechsel stoppt, wenn der Tastaturfokus in das Karussell gelangt, und startet nur auf Wunsch des Nutzers wieder; er pausiert auch, solange die Maus über dem Karussell schwebt.
• Die Folienauswahl kann als Tabs (die Folien werden zu tabpanel) oder als beschriftete Gruppe von Buttons gebaut werden, wobei der Button der aktuellen Folie aria-disabled="true" statt disabled hat, damit er in der Tab-Reihenfolge bleibt.

Tastaturbedienung

Das APG stellt das Bedienelement für den Wechsel an den Anfang der Tab-Reihenfolge, vor den wechselnden Inhalt.

Typische Fehler in Online-Shops

• Hero-Slider, die alle drei Sekunden wechseln und keinen Pause-Button haben.
• Verborgene Folien, die aus dem Bild geschoben wurden, deren Links aber weiter den Fokus erhalten, sodass Tab in unsichtbare Inhalte springt.
• Punkte als einzige Navigation, winzig und ohne Namen („Button“, „Button“, „Button“).
• Werbetext nur im Bild, mit alt="Banner".
• Karussells für Produktbilder, die auf Mobilgeräten nur per Wischen funktionieren und auf dem Desktop nur mit Vorschaubildern, die div-Elemente sind.
• Der Wechsel läuft weiter, während der Nutzer liest oder mit Tab in die Folie springt.
• Geklonte Folien für Endlosschleifen, die Links und IDs duplizieren.

Was automatische Prüfungen finden und was manuell zu testen ist

Alle sind Karten in unserer Regelbibliothek. 2.2.2 lässt sich nicht automatisch testen: Ob der Slider sich bewegt, wie lange und ob er sich pausieren lässt, muss ein Mensch beurteilen. Testen Sie außerdem per Tastatur, dass der Wechsel beim Fokus stoppt, dass verborgene Folien nicht erreichbar sind und dass ein Screenreader manuelle Folienwechsel ansagt.

Starten Sie die kostenlose Prüfung einer Seite auf Ihrer Startseite. Sie ist eine automatische Prüfung, kein vollständiges Audit.

Häufige Fragen

Erlauben die WCAG automatisch wechselnde Karussells?

Ja, mit einer Möglichkeit, sie anzuhalten. Das Kriterium 2.2.2 Pausieren, beenden, ausblenden verlangt einen Mechanismus, um bewegte Inhalte zu pausieren, zu beenden oder auszublenden, die automatisch starten, länger als fünf Sekunden dauern und parallel zu anderen Inhalten angezeigt werden.

Welche Bedienelemente braucht ein barrierefreies Karussell?

Laut APG: Buttons für die vorherige und die nächste Folie, optional Buttons oder Tabs zur Auswahl einer Folie und, bei automatisch wechselnden Karussells, einen Button zum Stoppen und Starten des Wechsels, der in der Tab-Reihenfolge zuerst kommt.

Sollte der Wechsel stoppen, wenn der Nutzer das Karussell fokussiert?

Ja. Das APG sagt, dass der Wechsel stoppt, sobald der Tastaturfokus in das Karussell gelangt, und nur auf Wunsch des Nutzers wieder startet; solange die Maus darüber schwebt, pausiert er.

Woher wissen Screenreader, welche Folie angezeigt wird?

Jede Folie ist eine Gruppe mit aria-roledescription="slide" und einem Namen wie „3 von 5“, und der Folien-Container hat aria-live="polite", wenn das Karussell nicht automatisch wechselt, sodass manuelle Folienwechsel angesagt werden.

Kann eine automatische Prüfung ein Karussell testen?

Sie findet Folienbilder ohne Alternativtext, Buttons ohne Namen, fokussierbare Links in verborgenen Folien und zu kleine Ziele. Ob sich der Wechsel pausieren lässt oder beim Fokus stoppt, kann sie nicht testen.

Quellen

• W3C WAI, APG Carousel pattern: https://www.w3.org/WAI/ARIA/apg/patterns/carousel/
• W3C, Understanding 2.2.2 Pause, Stop, Hide: https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html