Rola Struktura dokumentu

`listitem`

Oznacza element jako jedną pozycję na liście. Używaj <li> wewnątrz <ul> lub <ol> — natywny element niesie rolę i pozycję w zbiorze. Sięgaj po role="listitem" tylko gdy parowany jest z jawnym role="list" na elemencie niebędącym listą.

Kiedy używać

Wewnątrz <ul> lub <ol> po prostu używaj <li>. Przeglądarka automatycznie eksponuje rolę, licznik i pozycję w zbiorze.

Jedynym praktycznym przypadkiem dla role="listitem" jest sytuacja, gdy zastosowałeś role="list" do elementu niebędącego listą (na przykład żeby nadpisać heurystykę list-style: none w Safari), a elementy wewnątrz są również elementami niebędącymi listą. Każdy element potrzebuje wtedy role="listitem", żeby być policzonym.

Element listitem MUSI znajdować się wewnątrz role="list". Samo role="listitem" bez nadrzędnej listy jest nieprawidłowe i czytniki ekranu je ignorują.

Typowe błędy

role="listitem" na <div>, którego nadrzędny element nie ma role="list". Listitem nie ma kontekstu grupy.
<li> poza <ul> / <ol>. Nieprawidłowy HTML.
Ustawianie aria-posinset i aria-setsize gdy hierarchia DOM już odzwierciedla pozycję. Redundantne.
Mylenie role="listitem" z role="option" (używanym wewnątrz role="listbox" dla wybieralnych pozycji).
Dodawanie role="listitem" do elementów <li> już wewnątrz <ul> — duplikowanie roli, brak efektu.

Przykład

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

<!-- Kontener niebędący listą z jawnymi rolami -->
<div role="list" aria-label="Ostatnie aktualizacje">
  <div role="listitem">Nowa strona /toolkit/standards/</div>
  <div role="listitem">Dokumentacja WCAG 2.2 ukończona</div>
</div>