Rol Documentstructuur

`listitem`

Markeert een element als één item in een lijst. Gebruik <li> binnen <ul> of <ol> — het native element draagt de rol en de positie in de reeks. Gebruik role="listitem" alleen in combinatie met een expliciet role="list" op een niet-lijst-ouder.

Wanneer te gebruiken

Gebruik binnen een <ul> of <ol> gewoon <li>. De browser stelt de rol, het aantal en de positie in de reeks automatisch beschikbaar.

Het enige praktische geval voor role="listitem" is wanneer role="list" is toegepast op een niet-lijstelement (bijvoorbeeld om Safaris list-style: none-heuristiek te overschrijven) en de items daarbinnen ook geen lijstelementen zijn. Dan heeft elk item role="listitem" nodig om meegeteld te worden.

Een listitem MOET binnen een role="list" staan. Een los role="listitem" zonder lijstouder is ongeldig en schermlezers negeren het.

Veelvoorkomende fouten

role="listitem" op een <div> waarvan de ouder geen role="list" is. Het listitem heeft geen groepscontext.
<li> buiten <ul> / <ol>. Ongeldige HTML.
aria-posinset en aria-setsize instellen wanneer de DOM-hiërarchie de positie al weergeeft. Redundant.
role="listitem" verwarren met role="option" (gebruikt binnen role="listbox" voor selecteerbare items).
role="listitem" toevoegen aan <li>-elementen die al binnen een <ul> staan — dubbele rol, geen effect.

Voorbeeld

<!-- Aanbevolen -->
<ul>
  <li>JAWS</li>
  <li>NVDA</li>
  <li>VoiceOver</li>
</ul>

<!-- Niet-lijst-container met expliciete rollen -->
<div role="list" aria-label="Recente updates">
  <div role="listitem">Nieuwe /toolkit/standards/ landingspagina</div>
  <div role="listitem">WCAG 2.2-referentie voltooid</div>
</div>