Ruolo Struttura del documento

`listitem`

Segna un elemento come voce di un elenco. Si utilizza <li> all'interno di <ul> o <ol> — l'elemento nativo porta già il role e la posizione nell'insieme. Si ricorre a role="listitem" solo in abbinamento a un esplicito role="list" su un elemento padre non nativo.

Quando utilizzarlo

All’interno di un <ul> o <ol>, è sufficiente usare <li>. Il browser espone automaticamente il role, il conteggio e la posizione nell’insieme.

L’unico caso pratico per role="listitem" si ha quando si è applicato role="list" a un elemento non nativo (ad esempio per annullare l’euristica di Safari relativa a list-style: none) e gli elementi interni sono anch’essi elementi non nativi. In questo caso ogni voce necessita di role="listitem" per essere conteggiata.

Un listitem DEVE trovarsi all’interno di un role="list". Un role="listitem" privo di elemento padre che sia un elenco non è valido e gli screen reader lo ignorano.

Errori comuni

role="listitem" su un <div> il cui genitore non è un role="list". La voce non ha contesto di gruppo.
<li> al di fuori di <ul> / <ol>. HTML non valido.
Impostare aria-posinset e aria-setsize quando la gerarchia DOM riflette già la posizione. Ridondante.
Confondere role="listitem" con role="option" (usato all’interno di role="listbox" per gli elementi selezionabili).
Aggiungere role="listitem" a elementi <li> già all’interno di un <ul> — role duplicato, nessun effetto.

Esempio

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

<!-- Contenitore non nativo con role espliciti -->
<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>