Роля Структура на документа

`listitem`

Обозначава елемент като един елемент от списък. Използвайте <li> вътре в <ul> или <ol> — нативният елемент носи ролята и позицията в множеството. Прибягвайте до role="listitem" само когато е сдвоен с изричен role="list" върху родителски елемент, различен от списък.

Кога да се използва

Вътре в <ul> или <ol> използвайте просто <li>. Браузърът автоматично разкрива ролята, броя и позицията в множеството.

Единственият практически случай за role="listitem" е когато е приложен role="list" към елемент, различен от списък (например за да се заобиколи евристиката на Safari за list-style: none), а елементите вътре също не са от тип списък. Тогава всеки елемент се нуждае от role="listitem", за да бъде броен.

Елемент с listitem ТРЯБВА да е вътре в role="list". Самостоятелен role="listitem" без родителски списък е невалиден и екранните четци го игнорират.

Чести грешки

role="listitem" върху <div>, чийто родител не е role="list". Елементът от списък няма групов контекст.
<li> извън <ul> / <ol>. Невалиден HTML.
Задаване на aria-posinset и aria-setsize, когато DOM йерархията вече отразява позицията. Излишно.
Объркване на role="listitem" с role="option" (използван вътре в role="listbox" за избираеми елементи).
Добавяне на role="listitem" към <li> елементи, намиращи се вече вътре в <ul> — дублирана роля, без ефект.

Пример

<!-- Предпочитан начин -->
<ul>
  <li>JAWS</li>
  <li>NVDA</li>
  <li>VoiceOver</li>
</ul>

<!-- Контейнер без списък с изрични роли -->
<div role="list" aria-label="Recent updates">
  <div role="listitem">New /toolkit/standards/ landing page</div>
  <div role="listitem">WCAG 2.2 reference complete</div>
</div>