Rolle Dokumentstruktur

`listitem`

Markerer et element som ét element i en liste. Brug <li> inde i <ul> eller <ol> — det native element bærer rollen og positionen. Brug kun role="listitem" når det parres med en eksplicit role="list" på et ikke-liste-forældrerelement.

Hvornår brug det

Inde i en <ul> eller <ol> bruger man bare <li>. Browseren eksponerer automatisk rollen, antallet og positionen i sættet.

Det eneste praktiske tilfælde for role="listitem" er, når man har anvendt role="list" på et ikke-liste-element (f.eks. for at tilsidesætte Safaris list-style: none-heuristik), og elementerne indeni også er ikke-liste-elementer. Så skal hvert element have role="listitem" for at blive talt med.

Et listitem SKAL befinde sig inde i en role="list". Et role="listitem" uden listeforælder er ugyldigt, og skærmlæsere ignorerer det.

Typiske fejl

role="listitem" på en <div>, hvis forælder ikke er en role="list". Listelementet mangler gruppekontekst.
<li> uden for <ul> / <ol>. Ugyldig HTML.
Angivelse af aria-posinset og aria-setsize når DOM-hierarkiet allerede afspejler positionen. Overflødigt.
Forveksling af role="listitem" med role="option" (bruges inde i role="listbox" til valgbare elementer).
Tilføjelse af role="listitem" til <li>-elementer, der allerede er inde i en <ul> — duplikeret rolle, ingen effekt.

Eksempel

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

<!-- Ikke-liste-container med eksplicitte roller -->
<div role="list" aria-label="Recent updates">
  <div role="listitem">New /toolkit/standards/ landing page</div>
  <div role="listitem">WCAG 2.2 reference complete</div>
</div>