Ein Tabbed Interface (Registerkarten, Tabs) gliedert Inhalte in mehrere Bereiche, von denen jeweils nur einer angezeigt wird. Über eine Reihe von Reitern wechselt man zwischen den Panels. Tabs sind platzsparend, müssen aber sorgfältig umgesetzt werden, damit sie per Tastatur und Screenreader bedienbar sind.
Barrierefreie Umsetzung nach ARIA Authoring Practices
- Container mit
role="tablist"undaria-label - Reiter als
<button role="tab">mitaria-selected="true|false"undaria-controls - Panels mit
role="tabpanel"undaria-labelledbyauf den zugehörigen Tab - Nur der aktive Tab ist per Tab-Taste erreichbar (Roving Tabindex); Pfeiltasten wechseln zwischen Tabs, Pos1/Ende springen zum ersten/letzten
- Die Tab-Taste führt vom aktiven Tab ins Panel
- Deutlicher Fokus und klare visuelle Kennzeichnung des aktiven Tabs – nicht nur über Farbe
Tabs oder Akkordeon?
Auf schmalen Bildschirmen und bei langen Inhalten ist ein Akkordeon oft besser, weil mehrere Bereiche gleichzeitig geöffnet sein können und kein horizontales Scrollen der Reiter nötig ist.
Häufige Fragen
Wird Inhalt in versteckten Tabs von Google indexiert?
Ja, sofern er im HTML vorhanden ist. Google indexiert Inhalte in Tabs und Akkordeons bei Mobile-First-Indexierung normal.
Sollen Tabs automatisch oder manuell aktiviert werden?
Automatische Aktivierung beim Pfeiltasten-Fokus ist üblich. Lädt ein Panel langsam, ist manuelle Aktivierung per Enter/Leertaste besser.