tablist

Составная роль виджета из WAI-ARIA, которая нужна для группы, списка вкладок. Внутри элемента с этой ролью должна быть минимум одна панель вкладок с ролью tabpanel и связанная с ней вкладка с 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    role="tabpanel"    id="tabpanel-1"    tabindex="0"    aria-labelledby="tab-1">    <p>Травоядные животные с коротким хоботом, которые живут в лесу.</p>  </div></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
    role="tabpanel"
    id="tabpanel-1"
    tabindex="0"
    aria-labelledby="tab-1"
>
    <p>Травоядные животные с коротким хоботом, которые живут в лесу.</p>
  </div>
</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.

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

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

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

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

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

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