Zustand Widget-Zustand

`aria-expanded`

Gibt an, ob ein aufklappbares Element — Disclosure-Button, Combobox, Menü, Treeitem — aktuell geöffnet ist. Akzeptiert "true" oder "false". Wird üblicherweise mit aria-controls kombiniert, das auf den Bereich zeigt, den das Steuerelement öffnet.

Verwendung

Auf jedem Steuerelement, das einen anderen Bereich der Benutzeroberfläche öffnet und schließt: einer Accordion-Überschrift, einem „Mehr anzeigen“-Disclosure-Button, einem Combobox-Trigger, einem Menü-Button, einem treeitem mit Unterelementen oder einem Hamburger-Nav-Toggle. Das Steuerelement bleibt in beiden Zuständen dasselbe Element — nur das Attribut wechselt.

Wenn das Steuerelement seinen Zustand auf sich selbst umschaltet (stumm schalten / Ton aktivieren, folgen / entfolgen), sollte stattdessen aria-pressed verwendet werden. aria-expanded beschreibt eine Beziehung mit einem anderen Bereich, der üblicherweise über aria-controls identifiziert wird.

Die Rolle entscheidet, ob aria-expanded sinnvoll ist: Es wird auf button, combobox, link, tab, treeitem, menuitem, gridcell, row und einigen weiteren unterstützt. Auf einem <div> ohne Rolle hat es keine Wirkung.

Synchronisation

Gültige Werte sind "true" (Bereich geöffnet) und "false" (Bereich geschlossen). Der Standardwert bei fehlendem Attribut ist „kein Expanded-Zustand“ — was sich von "false" unterscheidet. Wenn ein Steuerelement grundsätzlich aufklappbar ist, sollte im geschlossenen Zustand aria-expanded="false" gerendert werden, anstatt das Attribut wegzulassen.

Das Attribut muss im selben Code-Pfad aktualisiert werden, der den Bereich öffnet oder schließt. Das Attribut ist die Informationsquelle, die Screenreader auslesen; die visuelle Pfeilspitze ist ein sekundärer Hinweis für sehende Nutzende.

aria-controls="<region-id>" sollte ergänzt werden, damit der Screenreader die Beziehung bekannt machen kann: „Filter, Schaltfläche, zugeklappt, steuert Filter-Panel“. Manche assistiven Technologien bieten eine Tastenkombination, um direkt zum gesteuerten Bereich zu springen.

Häufige Fehler

Eine CSS-Klasse auf dem Panel umschalten, aber vergessen, aria-expanded zu aktualisieren.
aria-expanded auf einem nicht-interaktiven Element ohne Rolle verwenden: Das Attribut wird ignoriert.
Nur aria-expanded="true" rendern — den "false"-Zustand nie abbilden: Screenreader geben im geschlossenen Zustand keine Rückmeldung.
aria-expanded auf einem Steuerelement verwenden, das keinen Bereich aufklappt (z. B. einem „Absenden“-Button).
aria-expanded mit aria-pressed auf Toggle-Buttons verwechseln, die keinen separaten Bereich öffnen.
aria-controls weglassen, sodass die Beziehung zwischen Auslöser und Panel implizit bleibt.

Beispiel

<button
  type="button"
  aria-expanded="false"
  aria-controls="filters-panel"
  onclick="toggle(this)"
>
  Filters
</button>

<div id="filters-panel" hidden>
  <!-- filter controls -->
</div>