aria-expanded: Auf-/Zugeklappt-Zustand barrierefrei kommunizieren

Akkordeons, Dropdown-Menüs, aufklappbare FAQ-Bereiche und Navigationsmenüs – all diese UI-Patterns basieren auf dem Konzept „etwas auf- oder zuklappen". Sehende Nutzer erkennen den Zustand visuell (Pfeil-Icon, sichtbarer/unsichtbarer Inhalt). Screenreader-Nutzer sind auf die programmatische Zustandsinformation <code>aria-expanded</code> angewiesen. Ohne dieses Attribut weiß ein blinder Nutzer nicht, ob ein Klick den Inhalt öffnen oder schließen wird. EN 301 549 Abschnitt 11.4.1.2 fordert, dass der Zustand aller interaktiven Elemente programmatisch bestimmbar ist.

Grundlagen: true, false und die Abwesenheit des Attributs

aria-expanded="true" signalisiert: Der zugehörige Inhalt ist aktuell sichtbar/aufgeklappt. aria-expanded="false" signalisiert: Der zugehörige Inhalt ist aktuell verborgen/zugeklappt. Kein aria-expanded-Attribut bedeutet: Das Element hat keine Auf-/Zuklapp-Funktionalität. Dies ist ein wichtiger Unterschied – ein Button ohne aria-expanded wird nicht als Toggle-Button kommuniziert. Wo wird aria-expanded gesetzt? Immer auf dem steuernden Element (dem Button oder Link, der den Inhalt togglet), niemals auf dem gesteuerten Inhalt selbst. Der Screenreader liest dann z. B. „FAQ-Frage 1, Button, zugeklappt" oder „Menü, Button, aufgeklappt". Die Verbindung zwischen Trigger und Inhalt wird über aria-controls hergestellt, das auf die ID des gesteuerten Elements verweist. WCAG 4.1.2 verlangt diese Zustandskommunikation für alle interaktiven Komponenten.

Akkordeon-Pattern

Ein barrierefreies Akkordeon verwendet <button>-Elemente als Trigger innerhalb von Überschriften: <h3><button aria-expanded="false" aria-controls="panel-1">Frage 1</button></h3><div id="panel-1" role="region" aria-labelledby="header-1" hidden>Antwort...</div>. Beim Klick wird aria-expanded auf "true" gesetzt und das hidden-Attribut entfernt. Wichtige Details: Der Button muss in einer Überschrift stehen, damit die Akkordeon-Struktur auch auf Überschriftenebene navigierbar bleibt (WCAG 1.3.1). Der gesteuerte Bereich erhält role="region" mit aria-labelledby, das auf den Button verweist. Das Akkordeon sollte per Tastatur bedienbar sein: Enter/Leertaste zum Togglen, optional Pfeiltasten zum Wechseln zwischen Akkordeon-Headern. Die WAI-ARIA Authoring Practices definieren das vollständige Keyboard-Interaktionsmodell.

Dropdown- und Navigationsmenü-Pattern

Für ein Dropdown-Menü in der Navigation: <button aria-expanded="false" aria-controls="submenu-1">Produkte</button><ul id="submenu-1" role="menu" hidden>...</ul>. Beachten Sie: Für Navigations-Dropdowns ist role="menu" oft nicht korrekt – verwenden Sie stattdessen eine einfache <ul>-Liste innerhalb von <nav>. role="menu" ist für Anwendungsmenüs gedacht und erfordert Pfeiltasten-Navigation. Mobile Hamburger-Menüs: Der Hamburger-Button erhält aria-expanded="false" im geschlossenen Zustand und aria-expanded="true" im offenen Zustand. Zusätzlich sollte aria-label="Menü öffnen" bzw. aria-label="Menü schließen" den visuellen Zustand in Text übersetzen. WCAG 2.4.3 (Fokusreihenfolge) verlangt, dass nach dem Öffnen der Fokus logisch auf den ersten Menüeintrag gesetzt wird.

JavaScript-Implementierung und Zustandsmanagement

Die JavaScript-Logik für aria-expanded muss den ARIA-Zustand und die Sichtbarkeit synchron halten: button.addEventListener("click", () => { const expanded = button.getAttribute("aria-expanded") === "true"; button.setAttribute("aria-expanded", String(!expanded)); const panel = document.getElementById(button.getAttribute("aria-controls")); panel.hidden = expanded; }); Häufige Fehler: CSS-basiertes Ein-/Ausblenden ohne Aktualisierung von aria-expanded. Verwendung von display: none statt des hidden-Attributs (funktioniert, ist aber weniger semantisch). Vergessen, aria-expanded beim Schließen aller Panels zurückzusetzen. Frameworks: In React, Angular und Vue sollte aria-expanded an den Komponentenzustand gebunden sein, damit es automatisch aktualisiert wird. Testen Sie immer mit einem Screenreader, ob die Zustandsänderung korrekt angekündigt wird. EN 301 549 prüft dies in Abschnitt 11.4.1.2.

Testen und Validieren

So prüfen Sie aria-expanded korrekt: DevTools-Inspektor: Öffnen Sie den Accessibility Tree in Chrome DevTools (Elemente → Barrierefreiheit) und beobachten Sie, ob sich der Zustand beim Klicken ändert. Screenreader-Test: Navigieren Sie mit NVDA oder VoiceOver zum Button und achten Sie auf die Ankündigung „zugeklappt" bzw. „aufgeklappt". Tastatur-Test: Prüfen Sie, ob Enter und Leertaste den Zustand korrekt togglen. Automatisierte Tests: Tools wie axe-core prüfen, ob aria-expanded mit einem Boolean-Wert versehen ist und ob das referenzierte aria-controls-Ziel existiert. Checkliste: aria-expanded auf dem Trigger-Element vorhanden? Wert ändert sich bei Interaktion? Gesteuerter Inhalt wird ein-/ausgeblendet? aria-controls verweist auf korrekte ID? Fokusmanagement nach dem Öffnen korrekt? Alle Punkte sind BFSG-relevant.