ARIA Zustände und Eigenschaften
Schematische Darstellung: Person mit weißem Stock gelangt über ein Boddenleitsystem zu einem Aufmerksamkeitsfeld

aria-expanded (Zustand)

(Materialsammlung)

Zuletzt geändert:

Mit dem Attribut aria-expanded wird der Erweiterungszustand einer ausklappbaren Komponente an Screen Reader vermittelt.

Syntax

Das Attribut wird im Steuerelement eingefügt, welches den Mechanismus auslöst.

Der Code für ein aufgefächertes Element sieht also folgendermaßen aus: 

<button
  aria-expanded="true">
  [Schalterbeschriftung]
</button>

Screen Reader Verhalten

aria-expanded Werte und deren Interpretation
Wert Erläuterung JAWS Meldung
true Der zugehörige Bereich ist visuell und mit Screen Reader wahrnehmbar. Erweitert
false Der zugehörige Bereich ist nicht wahrnehmbar. Reduziert
undefined oder leer (Standard) Unklar Reduziert

aria-controls vermeiden

Mit dem Attribut aria-controls kann auf den Bereich referenziert werden, der aus- und eingeklappt werden kann. Dieses Attribut ist nicht nötig, wenn sich der kontrollierte Bereich unmittelbar unter dem Steuerelement befindet. Da das Attribut für Screen Reader wortreich zu Verwirrung führen kann, sollte es in diesem Fall sogar vermieden werden: 

<button
  aria-expanded="false"
  aria-controls="Obst">
  Obstsorten
</button>
<div id="obst"
  […]
</div>