ARIA-rollen moeten in de vereiste parent-rol staan

Hoe plaats je ARIA-rollen in de vereiste parent?

Sommige ARIA-rollen zijn alleen geldig binnen een specifieke parent role. Plaats het element in de juiste parent, of voeg de vereiste parent role toe.

Veelgebruikte rollen en hun vereiste parent roles:

<div role="listitem">Item 1</div>
<div role="listitem">Item 2</div>

<div role="list">
  <div role="listitem">Item 1</div>
  <div role="listitem">Item 2</div>
</div>

<div role="menuitem">Openen</div>
<div role="menuitem">Opslaan</div>

<ul role="menu">
  <li role="menuitem">Openen</li>
  <li role="menuitem">Opslaan</li>
</ul>

Gebruik waar mogelijk native HTML-elementen in plaats van ARIA-rollen.

Waarom is dit belangrijk?

ARIA-rollen hebben een vaste hiërarchie. Ontbreekt de verplichte bovenliggende rol, dan begrijpen schermlezers de samenhang tussen HTML-elementen niet en kunnen ze het element overslaan, verkeerd voorlezen of bepaalde functionaliteit niet aanbieden.