Rooli Asiakirjarakenne

`list`

Merkitsee elementin luetteloksi. Käytä ensisijaisesti <ul>-, <ol>- tai <dl>-elementtiä — natiivielementti hoitaa roolin, laskurin ja visuaalisen merkinnän. Käytä role="list" vain, jos CSS:n list-style: none laukaisee Safarin listaroolinpoistoheuristiikan.

Milloin käyttää

Käytä <ul>:a järjestämättömille luetteloille, <ol>:a järjestetyille ja <dl>:ää kuvausluetteloille. Kukin niistä esitetään saavutettavuuspuussa luettelona oikeine kohtamäärineen automaattisesti.

Ainoa käytännön syy asettaa role="list" eksplisiittisesti <ul>-elementille on Safarin “listaroolinpoisto”: kun <ul>:lle on asetettu list-style: none, WebKit poistaa listaroolin saavutettavuuspuusta olettaen, että kyse on vain tyylittelyluettelosta. Eksplisiittinen role="list" ohittaa tämän heuristiikan.

Älä sekoita role="list" ja role="listbox". Lista on staattinen sisältö; listbox on interaktiivinen valintakomponentti. Niiden sekoittaminen saa ruudunlukuohjelmat odottamaan valintasemantikkaa, jota ei ole.

Yleiset virheet

role="list" <div>-säilössä, jonka lapset ovat <div>-”kohteita” ilman role="listitem". Listerooli edellyttää listitem-lapsia; ilman niitä laskuri on väärä.
role="list":n käyttö navigaatiovalikossa <nav>- ja <ul>-elementtien sijaan. Navigaatiomaamerkki on hyödyllisempi.
role="list":n lisääminen <ul>-elementille, jolla ei ole list-style: none. Tarpeeton; natiivirooli on jo olemassa.
role="list":n käyttö, vaikka tarkoitettu role="listbox".
<li>-elementtien sijoittaminen ei-lista-vanhemman (<div>) sisään — listakohteet jäävät orvoksi.

Esimerkki

<!-- Suositeltava -->
<ul>
  <li>Ruudunlukuohjelma</li>
  <li>Kytkimohjaus</li>
  <li>Ääniohjaus</li>
</ul>

<!-- Ohitetaan Safarin listaroolinpoisto -->
<ul role="list" style="list-style: none;">
  <li role="listitem">Ruudunlukuohjelma</li>
  <li role="listitem">Kytkimohjaus</li>
</ul>