list

ARIA-атрибут, который добавляет тегу роль списка.

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

Это незавершённая статья. Вы можете помочь её закончить! Почитайте о том, как контрибьютить в Доку.

Кратко

Секция статьи "Кратко"

Роль структуры документа из WAI-ARIA. Добавляет любому тегу семантическую роль списка. Делает содержимое более доступным для скринридеров, если нет возможности использовать возможности HTML.

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

Пример

Секция статьи "Пример"
        
          
          <section role="list">  <div role="listitem">Элемент списка 1</div>  <div role="listitem">Элемент списка 2</div>  <div role="listitem">Элемент списка 3</div></section>
          <section role="list">
  <div role="listitem">Элемент списка 1</div>
  <div role="listitem">Элемент списка 2</div>
  <div role="listitem">Элемент списка 3</div>
</section>

        
        
          
        
      

Как пишется

Секция статьи "Как пишется"

Добавьте к тегу ARIA-атрибут role со значением 'list'.

Внутри контейнера с этой ролью должен быть хотя бы один элемент с ролью listitem. Также в элемент с ролью list можно добавить один или несколько вложенных списков с ролью group. Во вложенных списках также должен быть минимум один элемент с listitems.

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

Не дублируйте role="list" для тегов <ul> и <ol>, в них уже встроена эта роль по умолчанию.

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

Как понять

Секция статьи "Как понять"

Роль list изменяет семантику других HTML-тегов на семантику списка.