list

Quando si usa

Si usi <ul> per gli elenchi non ordinati, <ol> per quelli ordinati, <dl> per gli elenchi di descrizione. Ciascun elemento viene esposto gratuitamente come elenco con il conteggio corretto delle voci.

L’unico motivo pratico per impostare esplicitamente role="list" su un <ul> è il comportamento di Safari noto come «list role removal»: quando a un <ul> viene applicato list-style: none, WebKit rimuove il role di elenco dall’albero di accessibilità, assumendo che si tratti di un elenco puramente stilistico. Impostare esplicitamente role="list" sovrascrive tale comportamento.

NON si confonda role="list" con role="listbox". Un elenco è contenuto statico; un listbox è un widget interattivo di selezione. Confonderli induce gli screen reader ad aspettarsi semantiche di selezione che non esistono.

Errori comuni

• role="list" su contenitori <div> che contengono «voci» <div> prive di role="listitem". Il role di elenco richiede figli listitem per esporre correttamente il conteggio; senza di essi il numero risulta errato.
• Usare role="list" per un menu di navigazione anziché <nav> con <ul>. Il landmark di navigazione è più utile.
• Aggiungere role="list" a un <ul> che non ha list-style: none. È ridondante: il role nativo è già presente.
• Usare role="list" quando si intendeva role="listbox".
• Racchiudere elementi <li> in un genitore non-elenco (un <div>) — i listitem diventano orfani.

Esempio

<!-- Soluzione preferita -->
<ul>
  <li>Screen reader</li>
  <li>Controllo tramite interruttore</li>
  <li>Controllo vocale</li>
</ul>

<!-- Sovrascrittura del comportamento di rimozione del role di elenco di Safari -->
<ul role="list" style="list-style: none;">
  <li role="listitem">Screen reader</li>
  <li role="listitem">Controllo tramite interruttore</li>
</ul>