Rola Struktura dokumentu

`list`

Oznacza element jako listę pozycji. Najpierw używaj <ul>, <ol> lub <dl> — natywne elementy obsługują rolę, licznik i znacznik wizualny. Sięgaj po role="list" tylko gdy CSS list-style: none wyzwala usunięcie roli listy przez Safari.

Kiedy używać

Używaj <ul> dla list nieuporządkowanych, <ol> dla list uporządkowanych, <dl> dla list definicji. Każda z nich jest automatycznie eksponowana jako lista z poprawną liczbą elementów.

Jedynym praktycznym powodem do jawnego ustawiania role="list" na <ul> jest zachowanie Safari polegające na „usuwaniu roli listy”: gdy <ul> ma zastosowane list-style: none, WebKit usuwa rolę listy z drzewa dostępności, zakładając, że jest to lista wyłącznie stylizacyjna. Jawne ustawienie role="list" nadpisuje tę heurystykę.

NIE myć role="list" z role="listbox". Lista to statyczna treść; listbox to interaktywny widget wyboru. Pomylenie ich wprowadza czytniki ekranu w błąd, oczekując semantyki zaznaczania, której nie ma.

Typowe błędy

role="list" na kontenerach <div> zawierających „elementy” <div> bez role="listitem". Rola listy wymaga eksponowania dzieci jako listitem; bez nich licznik jest błędny.
Używanie role="list" dla menu nawigacyjnego zamiast <nav> z <ul>. Landmark nawigacyjny jest bardziej użyteczny.
Dodawanie role="list" do <ul> bez list-style: none. Redundantne; natywna rola już tam jest.
Używanie role="list" tam, gdzie chodziło o role="listbox".
Umieszczanie elementów <li> w nadrzędnym <div> niebędącym listą — elementy listitem stają się sierotami.

Przykład

<!-- Preferowane -->
<ul>
  <li>Czytnik ekranu</li>
  <li>Sterowanie przełącznikiem</li>
  <li>Sterowanie głosem</li>
</ul>

<!-- Nadpisanie usunięcia roli listy przez Safari -->
<ul role="list" style="list-style: none;">
  <li role="listitem">Czytnik ekranu</li>
  <li role="listitem">Sterowanie przełącznikiem</li>
</ul>