Roll Dokumentstruktur

`listitem`

Markerar ett element som en post i en lista. Använd <li> inuti <ul> eller <ol> — det inbyggda elementet bär rollen och positionen i uppsättningen. Använd role="listitem" bara när det paras med ett explicit role="list" på ett icke-listparent.

När du ska använda

Inuti en <ul> eller <ol>, använd bara <li>. Webbläsaren exponerar rollen, antalet och positionen i uppsättningen automatiskt.

Det enda praktiska fallet för role="listitem" är när du har tillämpat role="list" på ett icke-listelement (till exempel för att åsidosätta Safaris list-style: none-heuristik) och posterna inuti också är icke-listelement. Då behöver varje post role="listitem" för att räknas.

En listitem MÅSTE vara inuti ett role="list". En fristående role="listitem" utan listparent är ogiltig och ignoreras av skärmläsare.

Vanliga fel

role="listitem" på en <div> vars parent inte är ett role="list". Listposten saknar gruppkontext.
<li> utanför <ul> / <ol>. Ogiltig HTML.
Att sätta aria-posinset och aria-setsize när DOM-hierarkin redan återspeglar positionen. Redundant.
Att blanda ihop role="listitem" med role="option" (används inuti role="listbox" för valbara poster).
Att lägga till role="listitem" på <li>-element som redan är inuti en <ul> — duplicerad roll, ingen effekt.

Exempel

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

<!-- Icke-listbehållare med explicita 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>