Eigenschap Relatie

`aria-controls`

Vermeldt het element of de elementen waarvan de aanwezigheid of inhoud door dit bedieningselement wordt bepaald. Veelvoorkomende combinaties: een tab beheert zijn tabpanel, een openbaarmakingsknop beheert een onthulde regio. Ondersteuning door hulptechnologie is wisselend — gebruik spaarzaam.

Wanneer gebruiken

Op een bedieningselement waarvan de activering een ander element op de pagina wijzigt — de canonieke voorbeelden zijn de relatie tab → tabpanel en een openbaarmakingsknop → onthulpaneel. Het vertelt hulptechnologie dat “het bedienen van dit widget invloed heeft op dat element verderop”, waardoor gevorderde gebruikers van het bedieningselement naar het beheerde element kunnen springen.

Gebruik het niet voor elke interactie. De meeste klikafhandelaars hebben aria-controls niet nodig; reserveer het voor gevallen waarbij het beheerde element werkelijk afzonderlijk in de DOM staat en de gebruiker baat heeft bij het kennen van de verbinding.

Werking

De waarde is een spatie-gescheiden lijst van element-ID’s voor het/de beheerde element(en). Het beheerde element moet in de DOM aanwezig zijn op het moment dat de relatie wordt bevraagd — als het tabpanel pas wordt geladen wanneer de tab wordt geactiveerd, is de verwijzing ongeldig voor schermlezergebruikers totdat het paneel verschijnt.

Ondersteuning is het zwakke punt. JAWS biedt een snelkoppeling “ga naar het beheerde element”, maar VoiceOver en NVDA negeren het attribuut grotendeels buiten specifieke patronen (tabs, comboboxen). Dat betekent dat aria-controls zelden de factor is die een functie toegankelijk maakt — het is een verbetering bovenop correcte rollen, focusbeheer en aria-expanded. Bouw het patroon eerst correct; voeg aria-controls als laatste toe.

Veelvoorkomende fouten

aria-controls behandelen als vervanging voor het verplaatsen van focus. Een knop “Ga naar resultaten” moet focus verplaatsen bij activering; aria-controls doet dat niet.
Verwijzen naar een element dat nog niet in de DOM staat. De verwijzing levert niets op totdat het paneel wordt weergegeven.
Vergeten ook aria-expanded in te stellen op een openbaarmakingsknop. aria-controls zegt “ik beïnvloed dat element”; aria-expanded zegt “en het is momenteel open / gesloten”.
aria-controls gebruiken op een aangepaste keuzelijst om naar een optielijst te verwijzen — het juiste patroon daar is role="combobox" met aria-controls op het invoerveld en aria-activedescendant voor de gemarkeerde optie.
aria-controls lukraak toevoegen aan elke knop “voor de volledigheid”. Ruis; niets is ervan afhankelijk.

Voorbeeld

<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>