Was ist ein barrierefreies Karussell?
Informationen zum Artikel
Autor: Dmitry Dugarev
Bestandteile eines Karussells
Karussells (Du kennst sie auch als Slider oder Slideshows) sind echt überall im Web. Man nutzt sie oft, um Bilder und Texte kompakt zu zeigen oder um Marketing-Infos prominent auf wenig Platz zu packen.
Du navigierst meistens mit "Weiter"- und "Zurück"-Pfeilen, kleinen Pünktchen ("Dots") für den Direktzugriff oder es rotiert automatisch. Die Funktionen sind meist:
- Slide-Inhalt: Jeder Slide hat Zeug drin wie Bilder, Text und Links.
- Slide-Übergänge: Die Slides wechseln, entweder wenn Du klickst oder automatisch in einer Schleife.
- Fokusmanagement: Wählst Du einen Slide aus, sollte der Fokus dorthin springen, damit Screenreader ihn ansagen. [1]
- Navigationselemente: Also Pfeil-Buttons und Punkt-Selektoren, die müssen beide barrierefrei sein. [2]
- Automatische Rotation: Sorgt für automatische Wechsel, muss aber von Dir steuerbar sein. [3]
Hier siehst Du ein Beispiel für so ein Karussell:
Live-Demo
Karussell mit 4 Folien. Verwende die Schaltflächen "Weiter" und "Zurück" oder wähle einen Punkt aus. Die automatische Rotation kann mit der Schaltfläche angehalten werden. Drücke jederzeit die Escape-Taste, um anzuhalten.
Was macht ein Karussell barrierefrei?
Ein barrierefreies Karussell sorgt dafür, dass all diese Funktionen auch für Leute zugänglich sind, die eine Tastatur statt 'ner Maus nutzen oder auf Screenreader angewiesen sind. Das heißt für Dich:
- Klare Struktur: Die Beziehung zwischen dem Karussell, seinen Folien und den Steuerelementen ist semantisch korrekt abgebildet. [4]
- Vollständige Tastaturbedienbarkeit: Alle interaktiven Elemente sind per Tastatur erreichbar und bedienbar. [5]
- Zuverlässiges Fokusmanagement: Der Fokus wird logisch geführt. Du weißt immer, wo Du bist, besonders nach einem Folienwechsel. [1], [6]
- Kontrollierbare Animationen: Automatische Rotationen kannst Du anhalten. Sie respektieren auch Deine Systemeinstellungen des Nutzers. [3]
- Verständliche Ansagen: Screenreader können den Zweck des Widgets, die aktuelle Position und alle Statusänderungen klar kommunizieren. [7]
Stell sicher, dass Dein Karussell diese Kriterien erfüllt, um eine inklusive und zugängliche Benutzererfahrung für alle Besucher Deiner Website zu schaffen.
Ressourcen für barrierefreie Karussells
Dieser Bereich richtet sich besonders an die Entwickler, die barrierefreie digitale Produkte erstellen möchten. Hier geht’s ums Eingemachte: Wie baue ich barrierefreie Karussells, die wirklich funktionieren – für alle Nutzergruppen?
Hier findest Du folgende Ressourcen:
- Schritt-für-Schritt-Anleitung zur Implementierung eines barrierefreien Karussells
- Die ultimative Checkliste fürs Audit der Barrierefreiheit von Karussells
Für jede Empfehlung erkläre ich das Warum dahinter, zeige Do’s & Don’ts aus der Praxis und liefere konkrete Codebeispiele. Zudem sind sie mit Quellen zu relevanten WCAG-Kriterien [8] und WAI-ARIA-Patterns [9] versehen, damit Du die Anforderungen leicht nachvollziehen kannst.
Starte einfach mit der Schritt-für-Schritt-Anleitung, um ein solides Grundgerüst zu bauen. Nutze die Checkliste, um sicherzustellen, dass Dein Karussell alle wichtigen Barrierefreiheitsanforderungen erfüllt.
Viel Erfolg bei der Umsetzung barrierefreier Karussells! Wenn Du Fragen hast oder Feedback geben möchtest, melde Dich gerne bei mir.
Über den Autor