Barrierefreies JavaScript-Akkordeon und Tabs: Code zum Kopieren | We.Inc
Ein Akkordeon in Vanilla JavaScript mit animierter Höhe und aria-expanded sowie Tabs mit Pfeiltasten und Roving Tabindex. Beide laufen live auf der Seite, mit Tastatur-Checkliste und ARIA-Tabelle.
Ein barrierefreies Akkordeon nutzt in jeder Überschrift einen echten Button. aria-expanded zeigt, ob sein Panel geöffnet ist, und aria-controls benennt das Panel. Barrierefreie Tabs nutzen role=tablist, tab und tabpanel mit aria-selected und wechseln mit den Pfeiltasten zwischen den Tabs, wobei nur der ausgewählte Tab in der Tab-Reihenfolge bleibt. Beide Demos unten laufen live.
Was du verwenden solltest
Verwende
Wann
Akkordeon
Lange Seiten mit Fragen, bei denen Menschen eventuell mehrere Antworten lesen
Tabs
Einige Ansichten derselben Sache, die nacheinander gelesen werden
details und summary
Einfaches Ein- und Ausblenden ganz ohne JavaScript
Jede Demo ist ein in sich geschlossener Block aus HTML, CSS und JavaScript. Bearbeite ihn und das Ergebnis läuft neu. Leg dann die Maus weg und teste mit der Tastatur anhand der Checkliste weiter unten.
Kopiere den Block für die benötigte Komponente in deine Seite.
Ändere den Text und achte darauf, dass jede id auf der Seite eindeutig bleibt.
Teste mit der Tastatur: Tab, Enter, Leertaste, die Pfeiltasten, Home und End.
Teste mit einem Screenreader: Er sollte erweitert oder reduziert ansagen, oder Tab 2 von 3.
Prüfe die Seite mit aktivierter reduzierter Bewegung; die Panels sollten sich ohne Animation öffnen.
Setze den Button in die Überschrift, statt die Überschrift klickbar zu machen; Überschriften sind nicht fokussierbar und sagen keinen Zustand an.
Nutze das hidden-Attribut bei geschlossenen Panels, damit man ihre Links nicht per Tab erreicht.
Setze keine Tabs in Tabs und keine Akkordeons in Tabs; Menschen verlieren sonst die Orientierung.
Wenn die Antworten für die Suche wichtig sind, lass sie im HTML (versteckt, nicht nachgeladen), damit Crawler und Menschen denselben Text sehen.
Häufige Fragen
Sollen Tabs mit den Pfeiltasten oder mit Enter wechseln?
Der ARIA-Leitfaden erlaubt beides. Wechseln, während der Pfeil wandert (automatische Aktivierung), fühlt sich am schnellsten an, wenn die Panels schon geladen sind. Wenn das Anzeigen eines Panels langsam ist, bewege den Fokus mit den Pfeilen und wechsle stattdessen mit Enter oder Leertaste.
Wie animiere ich die Höhe eines Akkordeons, ohne dass JavaScript misst?
Mach das Panel zu einem Grid und animiere grid-template-rows per Transition von 0fr zu 1fr, mit einem inneren Element mit overflow hidden. Der Browser berechnet die Höhe für dich.
Ist ein details-Element barrierefrei?
Ja. Browser stellen summary als Button mit Erweiterungszustand bereit, und es funktioniert ab Werk mit der Tastatur. Den Marker zu gestalten und zu animieren ist schwieriger, deshalb bauen viele Websites weiterhin ihre eigene Lösung.
Zählen versteckte Akkordeon-Antworten für SEO?
Inhalte, die im HTML stehen, aber eingeklappt sind, werden trotzdem gecrawlt. Lass sie im Seitenquelltext, statt sie beim Klick nachzuladen, und sorge dafür, dass die sichtbare Antwort dem entspricht, was im HTML steht.
Wie es weitergeht
Wenn du mit React arbeitest, enthält unsere Komponentengalerie ein Tab-Set mit gleitender Unterstreichung und ein FAQ-Akkordeon, beide mit kopierbarem JSX. Für einen FAQ-Abschnitt ergänzt du passende strukturierte FAQPage-Daten nur, wenn die Fragen und Antworten auf der Seite sichtbar sind.
Häufige Fehler
div-Elemente mit Klick-Handlern als Akkordeon-Überschriften verwenden. Sie sind mit Tab nicht erreichbar, und Screenreader wissen nicht, dass sie etwas tun.
Alle Tabs in die Tab-Reihenfolge aufnehmen, wodurch Tastaturnutzer sich durch alle durcharbeiten müssen, um den Inhalt zu erreichen.
Vergessen, aria-expanded oder aria-selected bei Zustandsänderungen zu aktualisieren, sodass der Screenreader das Falsche meldet.
Akkordeon
Barrierefreies Akkordeon mit animierter Höhe
Jede Überschrift enthält einen echten Button mit aria-expanded und aria-controls. Die Höhe wird mit einer Transition auf den Grid-Zeilen animiert, daher muss scrollHeight nicht gemessen werden. Probiere es mit Tab, Enter und Leertaste aus.
Immer nur ein Panel geöffnet
Wenn sich ein Panel öffnet, schließe alle anderen offenen. Halte das optional: Wer zwei Antworten vergleicht, will oft beide offen haben.
Fallback ohne JavaScript: details und summary
Native details-Elemente öffnen und schließen sich ohne Skript. Gibst du ihnen dasselbe name-Attribut, schließen sie sich in aktuellen Browsern gegenseitig aus; ältere erlauben einfach mehrere offene.
Tabs
Tabs mit Roving Tabindex und Pfeiltasten
Nur der ausgewählte Tab hat tabindex 0, daher springt Tab einmal in die Tab-Liste und dann weiter zum Panel. Pfeil links und rechts wechseln zwischen Tabs, Home und End springen an die Enden.
Tastatur- und ARIA-Checkliste
Tastaturtest: Probiere jeden Punkt in den Demos aus
Taste
Akkordeon
Tabs
Tab
Springt zum nächsten Überschrift-Button
Springt beim ausgewählten Tab in die Tab-Liste, dann zum Panel
Shift + Tab
Springt zum vorherigen Überschrift-Button
Springt zurück aus der Tab-Liste
Enter oder Leertaste
Öffnet oder schließt das fokussierte Panel
Wählt den fokussierten Tab aus (nur bei manueller Aktivierung nötig)
Pfeil rechts / links
Nicht erforderlich
Nächster / vorheriger Tab, mit Umlauf
Home / End
Optional: erste / letzte Überschrift
Erster / letzter Tab
ARIA-Referenz
Attribute, die jeder Teil braucht
Element
Akkordeon
Tabs
Auslöser
button in einer Überschrift, aria-expanded, aria-controls
role=tab, aria-selected, aria-controls, tabindex 0 oder -1
Container
Nichts erforderlich
role=tablist mit aria-label
Panel
id; role=region mit aria-labelledby ist optional
role=tabpanel, aria-labelledby, tabindex 0, wenn es keine fokussierbaren Inhalte hat