Karussell BFSG-konform: eine Checkliste für Web-Entwickler
Informationen zum Artikel
Autor: Dmitry Dugarev
Oh diese Karussells — sie sind so beliebt und gleichzeitig so problematisch, wenn es um Barrierefreiheit geht. Hier findest Du die komplette, zusammengeführte Checkliste aller Prüfpunkte aus meinem vollständigen Leitfaden zu barrierefreien Karussells — perfekt zum direkten Einsatz in Deinem Projekt oder Auditbericht.
Grundstruktur
- Karussell ist in einem
<section>-Element mitaria-roledescription="Karussell"umschlossen. [1], [2] -
aria-roledescriptionist in der Sprache des Benutzers lokalisiert. [3] - Das Karussell besitzt eine Überschrift mit eindeutiger ID. [4]
- Die Sektion hat ein
aria-labelledby, das auf die Überschrift verweist. [5]
Folien-Container
- Die Slides liegen in einem
<ul>mit einzelnen<li>-Elementen. [6], [7] - Das
<ul>hat einaria-label, das die Folienliste beschreibt. [8]
Inhalt der Folien
- Jede Folie ist ein
<article>zur semantischen Strukturierung. [1] - Jede Folie hat
aria-roledescription="Folie". [2] -
aria-roledescriptionist lokalisiert. [3] - Jede Folie hat eine eindeutige Überschrift mit ID. [4]
- Jede Folie hat
aria-labelledby, das auf die Überschrift verweist. [5] - Jede Folie hat
aria-posinsetundaria-setsize. [7] - Verborgene Folien sind mit
aria-hidden="true"undinertoderdisplay:nonemarkiert. [9]
Fokusmanagement
- Nach manuellem Wechsel landet der Fokus auf der Überschrift der neuen Folie. [10], [11]
- Fokus wird erst nach Abschluss der Animation verschoben. [12]
Steuerung der automatischen Rotation
- Es gibt eine sichtbare Pause/Wiedergabe-Schaltfläche. [13], [14]
- Die Schaltfläche ist ein echtes
<button>-Element mitaria-labelundtitle. [9], [8], [15] - Die Schaltfläche nutzt
aria-pressed, um den Zustand (an/aus) anzuzeigen. [16] - Die Schaltfläche ist per Tastatur bedienbar (
Enter,Leertaste). [17] - Deutlicher Fokus-Stil mit Kontrast ≥ 3:1. [18], [19]
- Kontrast der Schaltfläche ≥ 3:1. [19]
- Schaltfläche ist mindestens 44 × 44 px groß. [20]
- Automatische Rotation pausiert bei Maus- oder Tastatur-Interaktion. [13]
- Rotation respektiert
prefers-reduced-motion. [13]
Pfeil-Schaltflächen (Vor/Zurück)
- Pfeil-Navigation ist als
<ul>mitaria-labelausgezeichnet. [6], [8] - Pfeile sind konsistent am Anfang oder Ende des Karussells platziert. [21]
- Pfeile sind
<button>-Elemente mitaria-labelundtitle. [9], [8], [15] - Tastaturbedienung funktioniert (
Enter/Leertaste). [17] - Deutlicher Fokus-Stil mit Kontrast ≥ 3:1. [18], [19]
- Kontrast der Pfeile ≥ 3:1. [19]
- Schaltflächen mindestens 44 × 44 px groß. [20]
- Deko-Icons sind mit
aria-hidden="true"markiert. [22]
Punktnavigation (Dots)
- Punkte liegen in
<fieldset>mit<legend>. [23], [7] - Punkte sind als Radio-Buttons umgesetzt. [9], [17]
- Tasten
Home/Endspringen zum ersten/letzten Slide;ArrowLeft/ArrowRightoderUp/Downnavigieren zwischen Slides. [17] - Jeder Punkt hat ein
aria-labeloder sichtbare Textbeschriftung. [8], [24] - Fokussierte Punkte sind visuell unterscheidbar (Kontrast ≥ 3:1). [18], [19]
- Aktiver Punkt ist visuell hervorgehoben und wird von Screenreadern als aktiv angesagt. [9]
- Aktiver Punkt ist programmatisch unterscheidbar. [9]
Live-Region für Folienwechsel
- Es gibt ein verstecktes Element mit
aria-live="polite"undaria-atomic="true". [12] - Live-Region hat
role="status". [25] - Ansage erfolgt nach Fokuswechsel zur neuen Folie. [12]
- Keine Ansage bei automatischer Rotation. [12]
- Live-Region wird nur bei manuellen Wechseln aktualisiert. [12]
Visueller & Tastatur-Fokus
- Alle interaktiven Elemente (Punkte, Pfeile, Pause-Button) haben einen deutlich sichtbaren Fokus-Stil. [18]
- Fokus-Stil weist Kontrast ≥ 3:1 zum Hintergrund auf. [19]
Anleitungen zur Interaktion
- Es gibt ein (ggf. verstecktes) Textelement mit Interaktionshinweisen. [26]
- Anleitung ist über
aria-describedbymit dem Karussell verbunden. [27] - Anleitung ist über
aria-describedbyauch mit jeder Folie verbunden. [27]
Allgemeine Anforderungen (übergreifend)
- Struktur ist semantisch korrekt:
section,ul/li,article. [7] - Vollständige Tastaturbedienbarkeit gewährleistet. [17]
- Verlässliches Fokusmanagement vorhanden. [11]
- Automatische Bewegung ist steuerbar. [13]
- Screenreader erhalten klare Status- und Positionsmeldungen. [12]
- Progressive Enhancement: funktioniert auch ohne JavaScript.
- Internationalisierung: Lokalisierte Labels (v. a.
aria-roledescription). [3] -
prefers-reduced-motionwird respektiert. [13] - Regelmäßiges Testen mit Tastatur & Screenreader (VoiceOver, JAWS, NVDA).
Schlusswort
Mit dieser Checkliste bist Du bestens gerüstet, um ein Karussell zu entwickeln oder zu prüfen, das den WCAG 2.2 Richtlinien entspricht. Denke daran, dass Barrierefreiheit ein fortlaufender Prozess ist — teste regelmäßig mit echten Nutzern und verschiedenen Hilfstechnologien, um sicherzustellen, dass Dein Karussell für alle zugänglich bleibt.
Haftungsausschluss
Der Inhalt dieser Checkliste dient ausschließlich zu Informationszwecken und stellt keine Rechtsberatung dar. Obwohl ich mich bemühe, genaue und aktuelle Informationen bereitzustellen, übernehme ich keine Gewähr für die Vollständigkeit, Richtigkeit oder Aktualität der bereitgestellten Informationen. Die Einhaltung der Barrierefreiheitsstandards kann je nach spezifischem Kontext und Anwendungsfall variieren. Es wird empfohlen, bei der Implementierung von barrierefreien Karussells professionelle Beratung in Anspruch zu nehmen und regelmäßige Tests mit echten Benutzern durchzuführen, um sicherzustellen, dass die Anforderungen der WCAG-2.2-Richtlinien erfüllt werden. Ich hafte nicht für Schäden oder Verluste, die sich aus der Nutzung oder dem Vertrauen auf die in diesem Leitfaden enthaltenen Informationen ergeben.
Über den Autor