Eigenschaft Beziehung

`aria-controls`

Benennt das Element oder die Elemente, deren Vorhandensein oder Inhalt dieses Steuerelement bestimmt. Typische Paare: Ein Tab controls sein tabpanel, eine Disclosure-Schaltfläche controls einen eingeblendeten Bereich. Die Unterstützung durch assistive Technologien ist uneinheitlich – sparsam einsetzen.

Wann zu verwenden

Auf einem Steuerelement, dessen Aktivierung ein anderes Element auf der Seite verändert – die kanonischen Beispiele sind die Tab → Tabpanel-Beziehung und eine Disclosure-Schaltfläche → eingeblendeter Bereich. Es teilt der assistiven Technologie mit: „Die Bedienung dieses Widgets wirkt sich auf jenes dort aus“ – und gibt fortgeschrittenen Nutzenden eine Möglichkeit, vom Steuerelement zum gesteuerten Element zu springen.

Nicht bei jeder Interaktion einsetzen. Die meisten Click-Handler benötigen kein aria-controls; es ist für Fälle vorbehalten, in denen das gesteuerte Element im DOM wirklich getrennt steht und die Nutzenden von der Kenntnis dieser Verbindung profitieren.

Verhalten

Der Wert ist eine leerzeichen-getrennte Liste von Element-IDs der gesteuerten Elemente. Das gesteuerte Element muss zum Zeitpunkt der Abfrage der Beziehung im DOM vorhanden sein – wird das Tabpanel erst beim Aktivieren des Tabs eingehängt, verweist die Referenz für AT-Nutzende ins Leere, bis das Panel erscheint.

Die Unterstützung ist die Schwachstelle. JAWS bietet eine Tastenkombination „Zum gesteuerten Element springen“, aber VoiceOver und NVDA ignorieren das Attribut außerhalb bestimmter Muster (Tabs, Comboboxes) weitgehend. Das bedeutet, aria-controls ist selten das, was ein Feature barrierefrei macht – es ist eine Ergänzung auf Basis korrekter Rollen, Fokussteuerung und aria-expanded. Das Muster zuerst korrekt umsetzen; aria-controls zuletzt hinzufügen.

Häufige Fehler

aria-controls als Ersatz für das Verschieben des Fokus behandeln. Eine Schaltfläche „Zu den Ergebnissen springen“ muss den Fokus bei Aktivierung bewegen; aria-controls tut das nicht.
Auf ein Element zeigen, das noch nicht im DOM ist. Die Referenz löst sich in nichts auf, bis das Panel gerendert wird.
Vergessen, zusätzlich aria-expanded auf einer Disclosure-Schaltfläche zu setzen. aria-controls sagt „Ich beeinflusse jenes Element“; aria-expanded sagt „und es ist aktuell geöffnet / geschlossen“.
aria-controls auf einem benutzerdefinierten Select verwenden, um auf eine Optionsliste zu zeigen – das richtige Muster dort ist role="combobox" zusammen mit aria-controls auf dem Eingabefeld und aria-activedescendant für die hervorgehobene Option.
aria-controls zur Vollständigkeit auf jede Schaltfläche streuen. Das erzeugt Rauschen; nichts verlässt sich darauf.

Beispiel

<button
  type="button"
  aria-expanded="false"
  aria-controls="faq-1-answer"
>
  What is your refund policy?
</button>
<div id="faq-1-answer" hidden>
  Refunds are processed within 14 days …
</div>