Barrierefreie Akkordeons mit HTML, CSS und JS

Einleitung

Ein Akkordeon ist ein interaktives UI-Element, das Inhalte in zusammenklappbaren Bereichen organisiert. Nutzer können durch Klick auf Überschriften die jeweiligen Inhalte ein- und ausblenden. Perfekt, um komplexe Informationen übersichtlich zu strukturieren und Platz zu sparen.

Doch Vorsicht: Ohne korrekte Implementierung werden Akkordeons für Screen Reader Nutzer zur Barriere. Sie wirken dann wie eine zufällige Ansammlung von Texten ohne erkennbare Struktur. Mit den richtigen ARIA-Attributen und Tastaturunterstützung machst du dein Akkordeon für alle zugänglich – egal ob sie Maus, Tastatur oder Screen Reader verwenden.

Die Bausteine eines barrierefreien Akkordeons

Ein barrierefreies Akkordeon besteht aus folgenden strukturellen Elementen:

• button: Dient zum Öffnen und Schließen des jeweiligen Panels. Der Button ist fokussierbar und reagiert auf Tastaturaktionen.
• aria-expanded: Zeigt an, ob der zugehörige Bereich geöffnet (true) oder geschlossen (false) ist. Dieses Attribut ändert sich dynamisch.
• aria-controls: Verknüpft den Button eindeutig mit dem Inhaltsbereich (über die ID des Panels).
• div mit role="region": Der sichtbare Inhaltsbereich des Akkordeons. Das Rollenattribut region macht ihn für Screenreader als eigenständigen Bereich erkennbar.
• aria-labelledby: Verweist auf die ID des Buttons, damit Screenreader den Titel des Panels korrekt ansagen.
• hidden: Versteckt Panels, die nicht aktiv sind, sowohl visuell als auch für assistive Technologien. Zusätzlich wird mit visibility gearbeitet, um Fokusprobleme zu vermeiden.

Diese Struktur stellt sicher, dass Akkordeons sowohl für Tastaturnutzende als auch für Screenreader-Nutzende vollständig zugänglich sind.

Tastaturinteraktion

Damit ein Akkordeon vollständig tastaturfreundlich ist, sollten folgende Tasten unterstützt werden:

• Tab: Fokus auf den nächsten Akkordeon-Button setzen
• Shift + Tab: Auf den vorherigen Button setzen
• Pfeiltasten oben/unten (↑ ↓): Navigation zwischen den Buttons
• Enter oder Leertaste: Aktuelles Panel öffnen oder schließen
• Home / End: Direkt zum ersten oder letzten Akkordeon-Button springen (optional)

Live-Demo