Geldige ARIA-attributen voor elementrollen

Hoe gebruik je alleen toegestane ARIA-attributen?

Controleer welke ARIA-attributen zijn toegestaan voor de rol die je gebruikt. Hieronder staan correcte voorbeelden:

<!-- role="checkbox" staat aria-checked toe -->
<div role="checkbox" aria-checked="false">Voorwaarden accepteren</div>

<!-- role="listbox" staat aria-multiselectable toe -->
<ul role="listbox" aria-multiselectable="true">
  <li role="option" aria-selected="false">Optie A</li>
  <li role="option" aria-selected="true">Optie B</li>
</ul>

<!-- role="slider" staat aria-valuemin, aria-valuemax, aria-valuenow toe -->
<div role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50">Volume</div>

Het volgende is onjuist omdat aria-checked niet is toegestaan op een role="link":

<a href="/page" role="link" aria-checked="true">Pagina</a>

Waarom is dit belangrijk?

Screen readers gebruiken ARIA-attributen om de staat en eigenschappen van elementen te beschrijven. Wanneer een attribuut niet geldig is voor een bepaalde rol, kan ondersteunende technologie dit negeren of verwarrende uitvoer produceren.

Gebruik de WAI-ARIA-specificatie om de ondersteunde attributen per rol te vinden.