aria-expanded (State)
[Materialsammlung]
Mit dem Attribut aria-expanded kann der Erweiterungszustand einer ausklappbaren Komponente an Screen Reader vermittelt werden.
Typischerweise finden sich Funktionalitäten zum Ein- und Ausblenden in großen Navigationsstrukturen oder in so genannten Accordions. Sie sind sinnvoll, wenn sie die Übersichtlichkeit und damit die Useability verbessern.
Syntax
Für das Attribut aria-expanded sollten die Werte true oder false vergeben werden. Der Standardwert undefined scheint zu unklar und in der Interpretation durch Screen Reader zu unsicher.
Der Code für ein aufgefächertes Element könnte also etwa folgendermaßen aussehen:
<button aria-expanded="true">[Schalterbeschriftung]</button>
Screen Reader Verhalten
| Wert | Erläuterung | JAWS Meldung JAWS Version 15 |
|---|---|---|
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 insbesondere in JAWS wortreich zu Verwirrung führen kann, sollte es in diesem Fall sogar vermieden werden:
<button aria-expanded="false"
aria-controls="obst">
Obstsorten
</button>
<ul id="obst">
<li>Äpfel</li>
<li>Birnen</li>
... weitere Obstsorten
</ul>
Im Beispiel müssten natürlich das Ein- und Ausblenden der Liste technisch noch realisiert und der aria-expanded-Wert dem tatsächlichen Zustand angepasst werden.