Rooli Asiakirjarakenne

`listitem`

Merkitsee elementin yhdeksi kohdaksi luettelossa. Käytä <li>-elementtiä <ul>- tai <ol>-elementin sisällä — natiivielementti kantaa roolin ja sijainnin sarjassa. Käytä role="listitem" vain yhdistettynä eksplisiittiseen role="list":iin ei-lista-vanhemmalla.

Milloin käyttää

<ul>- tai <ol>-elementin sisällä käytä <li>:tä. Selain esittää roolin, laskurin ja sarjassa sijainnin automaattisesti.

Ainoa käytännön tapaus role="listitem"-attribuutille on tilanne, jossa role="list" on asetettu ei-lista-elementille (esimerkiksi ohittaakseen Safarin list-style: none -heuristiikan), ja sisäiset kohdat ovat myös ei-lista-elementtejä. Tällöin jokainen kohta tarvitsee role="listitem":n tullakseen lasketuksi.

Listikohdalla on OLTAVA role="list"-vanhempi. Yksinäinen role="listitem" ilman lista-vanhempaa on virheellinen, ja ruudunlukuohjelmat jättävät sen huomiotta.

Yleiset virheet

role="listitem" <div>-elementillä, jonka vanhempi ei ole role="list". Listakohdalla ei ole ryhmäkontekstia.
<li> <ul>- tai <ol>-elementin ulkopuolella. Virheellinen HTML.
aria-posinset:n ja aria-setsize:n asettaminen, vaikka DOM-hierarkia jo ilmaisee sijainnin. Tarpeeton.
role="listitem":n sekoittaminen role="option"-attribuuttiin (käytetään role="listbox"-elementin sisällä valittaville kohteille).
role="listitem":n lisääminen <li>-elementeille, jotka jo ovat <ul>-elementin sisällä — kaksoisrooli, ei vaikutusta.

Esimerkki

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

<!-- Ei-lista-säilö eksplisiittisillä rooleilla -->
<div role="list" aria-label="Viimeisimmät päivitykset">
  <div role="listitem">Uusi /toolkit/standards/-laskeutumissivu</div>
  <div role="listitem">WCAG 2.2 -viiteaineisto valmis</div>
</div>