zurück zu den Erläuterungen

Barrierefreies Akkordeon Beispiel

Beispiel für eine semantische Akkordeon-Komponente mit ARIA-Attributen und Landmarks zu Verbesserung des Accessibility-Tree, Tastatur-Steuerung nach W3-Standard, verschiedene Inhalte.

Akkordeon mit 3 Sektionen

Erläuterungen

Semantischer Aufbau

Semantik verbessert die Maschinen-Verwertbarkeit und informiert den Accessibility-Tree.


section.accordion-container[aria-labelledby=accordion-heading]
    h2#accordion-heading
    ul#myAccordion[role=tablist][aria-label="Akkordeon mit 3 Abschnitten"]
        li.accordion-item
            h3.accordion-header#accordion-header-1
                button.accordion-button#accordion-button-1[role=tab][aria-expanded=false][aria-controls=accordion-panel-1][aria-setsize=3][aria-posinset=1]
            section.accordion-panel#accordion-panel-1[role=tabpanel][aria-labelledby=accordion-header-1][aria-hidden=true]
                h4{Empfohlene Webseiten}
                Link list content
        li.accordion-item[role=presentation]
            h3.accordion-header#accordion-header-2
                button.accordion-button#accordion-button-2[role=tab][aria-expanded=false][aria-controls=accordion-panel-2][aria-setsize=3][aria-posinset=2]
            section.accordion-panel#accordion-panel-2[role=tabpanel][aria-labelledby=accordion-header-2][aria-hidden=true]
                h4{Kontaktformular}
                Form content
        li.accordion-item[role=presentation]
            h3.accordion-header#accordion-header-3
                button.accordion-button#accordion-button-3[role=tab][aria-expanded=false][aria-controls=accordion-panel-3][aria-setsize=3][aria-posinset=3]
            section.accordion-panel#accordion-panel-3[role=tabpanel][aria-labelledby=accordion-header-3][aria-hidden=true]
                h4{Über digitale Barrierefreiheit}
                Text content

Alternativen

Tastatursteuerung des Akkordeons

Allgemeine Navigation

Tab
Navigiert zum Akkordeon und zwischen den aktiven Elementen (Überschriften, Links, Formularfelder)
Shift + Tab
Rückwärts-Navigation zwischen den aktiven Elementen
Escape / ESC
Verlässt das Akkordeon und setzt den Fokus außerhalb der Komponente

Navigation innerhalb des Akkordeons

↓ oder Pfeil nach unten
Bewegt den Fokus zum nächsten Akkordeon-Header
↑ oder Pfeil nach oben
Bewegt den Fokus zum vorherigen Akkordeon-Header
Home
Springt zum ersten Akkordeon-Header
End
Springt zum letzten Akkordeon-Header

Steuerung der Akkordeon-Panels

Enter
Öffnet oder schließt das fokussierte Panel
Leertaste / Space
Öffnet oder schließt das fokussierte Panel

Navigation innerhalb eines geöffneten Panels

Nach dem Öffnen:
Der Fokus bleibt auf dem Header
Tab
Navigiert zu den interaktiven Elementen innerhalb des geöffneten Panels
Shift + Tab
Navigiert rückwärts zu den interaktiven Elementen oder zurück zum Header

Besonderheiten bei externen Links

Tab
Navigiert zwischen den Links
Enter
Aktiviert den fokussierten Link (öffnet in neuem Tab)

Besonderheiten im Formular

Tab
Wechselt zwischen Eingabefeld und Button
Enter (auf dem Button)
Sendet das Formular ab

Zugänglichkeitshinweise