Кратко
СкопированоРоль структуры документа из 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
лучше всего задать <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
и aria
.
В aria
задают итоговое количество пунктов, когда они появляются в списке не сразу. Например, как в бесконечной новостной ленте.
aria
указывает на позицию или номер пункта в списке, содержимое которого загружается постепенно.
Если список со всеми элементами появляется на странице сразу, браузеры автоматически считают количество пунктов и определяют положение.
<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: "."; }