Accessible Carousel
Wohin der Fokus im Karussell läuft
Pfeile ohne Namen, Folien außerhalb des Sichtfensters: zwei Stellen, ein Karussell.
Anatomie eines Karussells
Eine Folie im Bild. Ein klarer Weg im Hintergrund.
Die Grafik zeigt, was sichtbar bleibt, was pausiert und was aus dem Fokusweg muss.
- 1Nur die aktuelle Folie ist aktiv
Folie 1 und 3 tragen
inert. Ihre Links fehlen im Tab-Weg und im Accessibility Tree. - 2Der erste Schalter stoppt die Bewegung
Sein Name beschreibt die nächste Aktion: „Rotation anhalten“ oder „Rotation starten“.
- 3Der Fokus bleibt auf dem Schalter
Vor und zurück ändern die Folie. Sie versetzen den Tastaturfokus nicht.
So kippt die Rotation in den ruhigen Zustand
aria-live="off"aria-live="polite"Der Fokus allein startet nichts neu. Nur der Schalter „Rotation starten“ setzt sie fort. So wechselt der gelesene Inhalt nicht unvermittelt.
Was der Browser weitergibt
Muss es ein Karussell sein?
Wichtige Inhalte gehören nebeneinander oder untereinander.
Ein Karussell passt zu gleichrangigen Ergänzungen, etwa mehreren Ansichten desselben Produkts. Wenn jede Aussage gefunden werden soll, zeigen Sie alle.
Kein Zeitdruck. Kein verborgener Fokus. Alle Inhalte sind scanbar.
So prüfen Sie es
- Drücken Sie Tab. Der erste Fokus im Karussell erreicht den Rotationsschalter; die automatische Bewegung endet.
- Gehen Sie weiter. Der Fokus erreicht nur den Link der sichtbaren Folie und die benannten Pfeile, nie einen Link außerhalb des Sichtfensters.
- Starten Sie die Rotation erneut. Ein Vorleseprogramm soll nicht jeden automatischen Wechsel ansagen; nach dem erneuten Anhalten darf es manuelle Wechsel höflich melden.
Aus dem Prüfbericht
Zwei Stellen, zwei Befunde
Kritisch Die Pfeile haben keinen Namen Regel button-name
Zwei Symbol-Schaltflächen sagen beide nur „Schaltfläche“. aria-label nennt „Vorherige Folie“ und „Nächste Folie“.
Zum Mitnehmen
Das Karussell, korrigiert
Namen für die Pfeile, inert für die Folien außerhalb, ein Schalter für die Rotation.
Korrektur in 3 Schritten ansehen
Den Pfeilen Namen geben
Das Symbol bleibt, das Wort kommt aus aria-label und wird vorgelesen.
KorrekturvergleichSchritt 1 · HTML Vorher
<button type="button" class="prev"> <svg aria-hidden="true"><use href="#chevron-left"></use></svg> </button>Nachher
<button type="button" class="prev" aria-label="Vorherige Folie"> <svg aria-hidden="true"><use href="#chevron-left"></use></svg> </button>Markierte Zeilen wurden geändert
So prüfen Sie es Tab auf den Pfeil. Ein Vorleseprogramm sagt „Vorherige Folie, Schaltfläche“.
Folien außerhalb des Sichtfensters inert setzen
inert entfernt Folie und Links aus Tab-Reihenfolge und Ausgabe. aria-hidden allein reicht nicht.
KorrekturvergleichSchritt 2 · HTML Vorher
<li class="slide" aria-hidden="true"> <a href="/aktion">Mehr erfahren</a> </li>Nachher
<li class="slide" inert> <a href="/aktion">Mehr erfahren</a> </li>Markierte Zeilen wurden geändert
So prüfen Sie es Drücken Sie Tab über die sichtbare Folie hinaus. Der Fokus verlässt das Karussell, statt zu verschwinden.
Einen Schalter für die Rotation ergänzen
Automatischer Wechsel braucht einen Schalter. Sein Name nennt die nächste Aktion und wechselt zwischen Anhalten und Starten.
KorrekturvergleichSchritt 3 · HTML Vorher
<div class="controls"> <button type="button" class="prev" aria-label="Vorherige Folie">‹</button> <button type="button" class="next" aria-label="Nächste Folie">›</button> </div>Nachher
<div class="controls"> <button type="button" class="prev" aria-label="Vorherige Folie">‹</button> <button type="button" class="next" aria-label="Nächste Folie">›</button> <button type="button" class="pause">Rotation anhalten</button> </div>Markierte Zeilen wurden geändert
So prüfen Sie es Klicken Sie „Rotation anhalten“. Die Folie bleibt stehen, der Name wechselt zu „Rotation starten“.