`list`

Атрибут для роли списка.

Время чтения: меньше 5 мин

Кратко

Скопировано

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

Списки состоят из пунктов, в которых перечисляются объекты. Если при перечислении важна последовательность, используют нумерованные списки. Когда порядок не важен, добавьте маркированный список. В нумерованных списках каждый пункт начинается с цифры, в маркированных — с маркера (буллита).

Роль list есть у тегов <ul> и <ol> по умолчанию.

Пример

Скопировано

        
          
          <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>

Список с атрибутом aria-owns, который связывает список-родитель с пунктами-детьми:

        
          
          <div role="list" aria-owns="item1 item2 item3">  <span role="listitem" id="item1">Картошка.</span>  <span role="listitem" id="item2">Кружево.</span>  <span role="listitem" id="item3">Мышьяк.</span></div>
          <div role="list" aria-owns="item1 item2 item3">
  <span role="listitem" id="item1">Картошка.</span>
  <span role="listitem" id="item2">Кружево.</span>
  <span role="listitem" id="item3">Мышьяк.</span>
</div>

Не обязательно задавать списку aria-owns. Скринридеры озвучат оба примера одинаково: «Список из трёх пунктов. Картошка. Кружево. Мышьяк».

Как пишется

Скопировано

Добавьте к тегу атрибут role со значением list. Лучше всего задавать роль <div> или <span>.

В первую очередь используйте для списков <ul> и <ol>. Роль list делает содержимое страницы понятным для скринридеров и других вспомогательных технологий, когда не хватает возможностей HTML. Явная роль списка пригодится для кастомных элементов или поддержки старого кода.

Внутри контейнера с ролью list должен находиться хотя бы один пункт listitem, иначе скринридеры не засчитают элемент списком.

        
          
          <div role="list">  <span role="listitem">Блюда.</span></div>
          <div role="list">
  <span role="listitem">Блюда.</span>
</div>

Можете вкладывать в кастомные списки list другие списки с ролью group. Вложенные списки должны включать минимум один пункт с ролью listitem.

        
          
          <div role="list">  <span role="listitem">Блюда:</span>  <div role="group">    <span role="listitem">сырники со сметаной;</span>    <span role="listitem">запеканка;</span>    <span role="listitem">вареники.</span>  </div></div>
          <div role="list">
  <span role="listitem">Блюда:</span>
  <div role="group">
    <span role="listitem">сырники со сметаной;</span>
    <span role="listitem">запеканка;</span>
    <span role="listitem">вареники.</span>
  </div>
</div>

Обратите внимание, что ARIA-роль list не указывает на то, какой тип у списка — упорядоченный или неупорядоченный.

        
          
          <div role="list" class="list">  <span role="listitem" class="list__item">Повелитель мух</span>  <span role="listitem" class="list__item">Чума</span>  <span role="listitem" class="list__item">Процесс</span>  <span role="listitem" class="list__item">Мамаша Кураж и её дети</span></div>
          <div role="list" class="list">
  <span role="listitem" class="list__item">Повелитель мух</span>
  <span role="listitem" class="list__item">Чума</span>
  <span role="listitem" class="list__item">Процесс</span>
  <span role="listitem" class="list__item">Мамаша Кураж и её дети</span>
</div>

Открыть демо в новой вкладке

Так как list не влияет на внешний вид элемента, стилизуйте список и пункты в нём с помощью CSS.

        
          
          .list {  display: flex;  flex-direction: column;  line-height: 1.5;}.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 {
  display: flex;
  flex-direction: column;
  line-height: 1.5;
}

.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 для <ul> и <ol>. Единственное исключение — исправление поведения списков в Safari. Браузер сбрасывает роль list у <ul> и <ol> со свойством list-style: none, которые не вложены в <nav>. Это осознанное решение разработчиков движка WebKit.

Если вам действительно важно сохранить семантику списка, задайте элементу role="list":

        
          
          <!-- Фолбэк для Safari --><ul role="list">  <li>Свобода.</li>  <li>Равенство.</li>  <li>Братство.</li></ul>
          <!-- Фолбэк для Safari -->
<ul role="list">
  <li>Свобода.</li>
  <li>Равенство.</li>
  <li>Братство.</li>
</ul>

Кратко

Пример

Как пишется

Читайте также

listitem

<ul>

<ol>

`listitem`

`<ul>`

`<ol>`