listitem

Роль структуры документа из WAI-ARIA для пункта нумерованного или маркированного списка.

В нумерованных списках пункты начинаются с цифр, а в маркированных — с маркеров (буллитов).

В HTML роль listitem уже есть у <li>.

Кастомный список без дополнительных ARIA-атрибутов.

        
          
          <div role="list">  <span role="listitem">годы;</span>  <span role="listitem">берут;</span>  <span role="listitem">своё.</span></div>
          <div role="list">
  <span role="listitem">годы;</span>
  <span role="listitem">берут;</span>
  <span role="listitem">своё.</span>
</div>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

В большинстве случаев используйте <li>. Если создаёте кастомный список, то role="listitem" лучше всего задать <div> или <span>.

Пункт с listitem обязательно должен быть вложен в список с ролью list. Это может быть кастомный список с явной ролью list или <ul> и <ol>, в которые роль встроена по умолчанию.

        
          
          <div role="list">  <span role="listitem">Горлица.</span></div>
          <div role="list">
  <span role="listitem">Горлица.</span>
</div>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Элементам с ролью listitem можно задавать все глобальные ARIA-атрибуты и два дополнительных свойства aria-posinset и aria-setsize.

В aria-setsize задают итоговое количество пунктов, когда они появляются в списке не сразу. Например, как в бесконечной новостной ленте.

aria-posinset указывает на позицию или номер пункта в списке, содержимое которого загружается постепенно.

Если список со всеми элементами появляется на странице сразу, браузеры автоматически считают количество пунктов и определяют положение.

        
          
          <h2 id="list-label">Новости</h2><div  role="list"  aria-labelledby="list-label">  <span role="listitem">    <a href="#">Горлица съела кусочек хлеба</a>  </span>  <span role="listitem">    <a href="#">Голубь упал со стола</a>  </span>  <span role="listitem">    <a href="#">Стриж свил гнездо на льдине</a>  </span>  <span    role="listitem"    aria-setsize="100"    aria-posinset="1"  >    <a href="#">Стая колибри спасла пчелу</a>  </span>  <span    role="listitem"    aria-setsize="100"    aria-posinset="2"  >    <a href="#">Соловей начал сольную карьеру</a>  </span>  <!-- Элементы, подгружающиеся по мере прокрутки --></div>
          <h2 id="list-label">Новости</h2>
<div
  role="list"
  aria-labelledby="list-label"
>
  <span role="listitem">
    <a href="#">Горлица съела кусочек хлеба</a>
  </span>
  <span role="listitem">
    <a href="#">Голубь упал со стола</a>
  </span>
  <span role="listitem">
    <a href="#">Стриж свил гнездо на льдине</a>
  </span>
  <span
    role="listitem"
    aria-setsize="100"
    aria-posinset="1"
  >
    <a href="#">Стая колибри спасла пчелу</a>
  </span>
  <span
    role="listitem"
    aria-setsize="100"
    aria-posinset="2"
  >
    <a href="#">Соловей начал сольную карьеру</a>
  </span>
  <!-- Элементы, подгружающиеся по мере прокрутки -->
</div>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

ARIA-роли не влияют на стили, поэтому стилизуйте пункты с listitem руками.

        
          
          .list__item {  position: relative;  padding-left: 25px;  text-transform: lowercase;}.list__item::before {  content: "";  position: absolute;  top: 13px;  left: 0;  width: 14px;  height: 14px;  background-color: #10F3AF;}.list__item::after {  content: ";";}.list__item:last-of-type::after {  content: ".";}
          .list__item {
  position: relative;
  padding-left: 25px;
  text-transform: lowercase;
}

.list__item::before {
  content: "";
  position: absolute;
  top: 13px;
  left: 0;
  width: 14px;
  height: 14px;
  background-color: #10F3AF;
}

.list__item::after {
  content: ";";
}

.list__item:last-of-type::after {
  content: ".";
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать