
aria-controls (Property)
Mit dem Attribut aria-controls
kann auf einem Steuerelement für Screen Reader ein Verweis auf einen kontrollierten Bereich gesetzt werden.
Auf dieses Attribut sollte verzichtet werden, wenn sich das kontrollierte Element im DOM unmittelbar unter dem Steuerelement befindet. Und diese Reihenfolge sollte in der Regel eingehalten werden.
Screen Reader Verhalten
JAWS
Befindet sich das Attribut aria-controls
in einem Steuerelement; liefert JAWS zumindest seit der Version 2018 folgende Zusatzinformation:
"Drücken Sie JawsTaste+Alt+M, um zum Kontrollelement zu springen"
Das Drücken dieser Tastenkombination setzt den Fokus auf das kontrollierte Element, das in der Standardkonfiguration auch unverzüglich vorgelesen wird.
- Der Ausdruck "Kontrollelement" ist irreführend. Das Steuerelement und die Tastenkombination führen nicht zum Kontrollelement, sondern zum kontrollierten Element.
- Die erforderliche Tastenkombination JAWS+ALT+M stellt für Sehende schon eine motorische Herausforderung dar und erst recht für Blinde ☹.
NVDA
NVDA ignoriert das Attribut aria-controls
gänzlich. (Stand Version 2022/3)
Problembereiche des Attributs
Das Attribut aria-controls
sollte den vom Steuerelement kontrollierten Bereich für Screen Reader identifizieren. Screen Reader kümmern sich jedoch nur stiefmütterlich um das Attribut und das vielleicht aus gutem Grund.
Befindet sich der kontrollierte Bereich im DOM unmittelbar unter dem Steuerelement, Wird der kontrollierte Bereich ohnedies durch Drücken von ↓ erreicht. Die Zusatzinformation auf dem Steuerelement stellt einen unnötigen Ballast dar und kann sogar zu Verwirrung führen.
Lässt sich der kontrollierte Bereich durch das Steuerelement ein- und ausblenden, muss der jeweilige Zustand durch aria-expanded
an den Screen Reader übermittelt werden. Dieses Attribut informiert implizit über das Vorhandensein eines kontrollierten Elements. Befindet sich der ausklappbare Bereich unmittelbar unter dem Steuerelement, ist auch hier die Zusatzinformation aus aria-controls
unnötig.
Es gibt keinen allgemeinen Tastaturmechanismus, mit dem gezielt zum Steuerelement zurücknavigiert werden kann.
Befindet sich das kontrollierte Element im DOM nicht unmittelbar unter dem Steuerelement, kann dies zu einem Fehler in Bezug auf die Erfolgskriterien 1.3.2 Bedeutungstragende Reihenfolge oder 2.4.3 Fokusreihenfolge führen.
Alternativen
- Kann das referenzierte Element nicht einfach direkt unter das Steuerelement platziert werden?
- Kann der referenzierte Bereich nicht besser als ausgeklappter Inhalt eingeblendet werden? (z.B. als details-Element)
- Wäre es möglich, zum referenzierten Element einfach zu verlinken? (
href="#..."
)