Voorwaardelijke ARIA-attributen

Hoe herstel je dit probleem?

Voeg ARIA-attributen alleen toe als het element zich in een toestand bevindt die ze vereist. Het meest voorkomende voorbeeld is aria-expanded, dat alleen geldig is op elementen die iets kunnen openen of sluiten:

<button aria-expanded="false" aria-controls="menu">Menu openen</button>
<ul id="menu" hidden>
  <li>Item 1</li>
</ul>

<a href="/pagina" aria-expanded="false">Ga naar pagina</a>

Een ander voorbeeld is aria-checked, dat alleen geldig is op selectievakjes, keuzerondjes en vergelijkbare rollen:

<div role="checkbox" aria-checked="true">Voorwaarden accepteren</div>

<div aria-checked="true">Wat tekst</div>

Verwijder ARIA-attributen die niet van toepassing zijn op de huidige rol of toestand van het element.

Waarom is dit belangrijk?

Schermlezers lezen ARIA-attributen om de toestand van elementen aan gebruikers te melden. Een attribuut dat buiten zijn geldige context wordt gebruikt, levert onjuiste of verwarrende aankondigingen op. Gebruikers kunnen te horen krijgen dat een element is uitgevouwen, aangevinkt of geselecteerd terwijl dat niet zo is.

Raadpleeg de WAI-ARIA-specificatie om te controleren welke attributen geldig zijn voor elke rol en onder welke omstandigheden.