Клавиша / esc

tablist

Роль-обёртка для группы вкладок.

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

Кратко

Скопировано

Составная роль виджета из WAI-ARIA, которая нужна для группы, списка вкладок. Внутри такого элемента должна быть минимум одна вкладка с ролью tab.

В HTML нет тега с роль tablist.

Пример

Скопировано
        
          
          <h1 id="tabs-label">Необычные животные</h1><div role="tablist" aria-labelledby="tabs-label">  <button    role="tab"    type="button"    id="tab-1"    aria-selected="true"    aria-controls="tabpanel-1">    Тапиры  </button></div><div  role="tabpanel"  id="tabpanel-1"  tabindex="0"  aria-labelledby="tab-1">  <p>Травоядные животные с коротким хоботом, которые живут в лесу.</p></div>
          <h1 id="tabs-label">Необычные животные</h1>
<div role="tablist" aria-labelledby="tabs-label">
  <button
    role="tab"
    type="button"
    id="tab-1"
    aria-selected="true"
    aria-controls="tabpanel-1"
>
    Тапиры
  </button>
</div>

<div
  role="tabpanel"
  id="tabpanel-1"
  tabindex="0"
  aria-labelledby="tab-1"
>
  <p>Травоядные животные с коротким хоботом, которые живут в лесу.</p>
</div>

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

При фокусе на группе вкладок скринридер прочтёт её примерно так: «Необычные животные, контрол вкладок. Тапиры, выбранная вкладка, одна из двух».

Как пишется

Скопировано

Добавьте к нужному тегу атрибут role со значением tablist. Это могут быть любые теги, но лучше всего подойдут семантические нейтральные <div> или <span>.

К элементу с tablist можно применять все глобальные ARIA-атрибуты и aria-multiselectable. Этот атрибут означает, что можно выбрать одновременно несколько вкладок. Без него, по умолчанию, выбирается только одна вкладка.

Также у роли tablist по умолчанию есть свойство aria-orientation со значением horizontal. Благодаря ему пользователи узнают о расположении вкладок и определят, какие клавиши использовать для навигации. Если меняете расположение с горизонтального на вертикальное и располагаете вкладки друг под другом, как это часто делают в мобильных интерфейсах, не забудьте поменять значение aria-orientation на vertical.

Элементы внутри tablist обязательно должны получать фокус с клавиатуры, если они не поддерживают его сами по себе. Это можно сделать с помощью атрибута tabindex со значением 0. Альтернативный способ — обрабатывать события при фокусе с помощью JavaScript.

Хорошая практика — давать группе вкладок название. Используйте видимый заголовок подходящего уровня <h1><h6> и свяжите с ним tablist при помощи aria-labelledby. Если название не должно быть видимым всем, добавьте к tablist aria-label.

        
          
          <h3 id="label">Необычные животные</h3><div  role="tablist"  aria-labelledby="label">  <!-- Вкладки --></div>
          <h3 id="label">Необычные животные</h3>
<div
  role="tablist"
  aria-labelledby="label"
>
  <!-- Вкладки -->
</div>

        
        
          
        
      
        
          
          <div  role="tablist"  aria-label="Необычные животные">  <!-- Вкладки --></div>
          <div
  role="tablist"
  aria-label="Необычные животные"
>
  <!-- Вкладки -->
</div>

        
        
          
        
      

Поддержка клавиатуры

Скопировано

Когда пользователь перешёл к tablist с помощью Tab, в фокусе должна оказаться первая активная вкладка с ролью tab.

Между горизонтальными вкладками перемещаемся стрелками влево и вправо, а вертикальными — вверх и вниз. Когда на вкладке сделан фокус, она может раскрываться либо автоматически, либо после нажатия на Enter или пробел.

Если со вкладкой связано выпадающее меню, рекомендуют поддерживать для его открытия сочетание Shift F10.

Дополнительно, но не обязательно, можно добавить поддержку Home для возврата к первой вкладке, End для перехода к последней, Del для закрытия текущей и перехода к следующей или предыдущей в зависимости от количества вкладок.

Как понять

Скопировано

Вкладки — это популярный паттерн в вебе и десктопных программах. Когда нажимаешь на название вкладки, открывается новая область с её содержимым или целая страница, как в браузерах.

Визуально вкладки обычно располагают друг за другом по горизонтали, а когда экран небольшой и места мало, то друг под другом по вертикали.

Устройство вкладок в виде схемы:

Список вкладок с ролью tablist располагается над открытым содержимым вкладки с ролью tabpanel. Группа вкладок состоит из отдельных элементов с ролями tab.