tab

Самостоятельная роль виджета из WAI-ARIA, которая означает вкладку.

В HTML нет тега, похожего на роль tab.

        
          
          <button  role="tab"  aria-controls="tabpanel-1"  aria-selected="true">  Тапиры</button>
          <button
  role="tab"
  aria-controls="tabpanel-1"
  aria-selected="true"
>
  Тапиры
</button>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

Элемент с ролью tab обязательно должен находится внутри другого с ролью tablist.

Роль tab можно задать любому тегу, но лучше всего подходят <button>, <div> или <span>. <button> — интерактивный элемент, который по умолчанию поддерживает навигацию с клавиатуры. На кнопке можно сделать фокус с помощью Tab и нажать на неё пробелом или Enter. Эти клавиши должны поддерживать и вкладки.

Если решили использовать для вкладок <button>, нужно немного поколдовать над фокусом. Перемещаться между вкладками принято с помощью стрелок, так что для <button role="tab"> пригодится приём с отрицательным и положительным значениями tabindex. Для активной вкладки добавьте tabindex="0", а для неактивной tabindex="-1". Так при нажатии Tab попадём на первую или ранее выбранную вкладку, а к другим вкладкам так уже переместиться не сможем. Не забудьте отслеживать события и переключать значение tabindex с помощью JavaScript.

tab обязательно должна быть связана с содержимым из tabpanel. Для этого задайте атрибут aria-controls для tab и добавьте id с таким же значением к tabpanel.

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Также у элемента с ролью tab обязательно должен быть атрибут aria-selected. Он указывает на то, выбрана вкладка или нет. У выбранной вкладки должен быть aria-selected="true", у неактивной вкладки или без явно указанного атрибута — aria-selected="false". Так что тут опять не обойтись без JavaScript.

        
          
          <!-- Выбранная вкладка --><button  role="tab"  aria-selected="true">  Тапиры</button><!-- Невыбранная, неактивная вкладка --><button  role="tab"  aria-selected="false"  tabindex="-1">  Ламантины</button>
          <!-- Выбранная вкладка -->
<button
  role="tab"
  aria-selected="true"
>
  Тапиры
</button>

<!-- Невыбранная, неактивная вкладка -->
<button
  role="tab"
  aria-selected="false"
  tabindex="-1"
>
  Ламантины
</button>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Когда можно одновременно выбрать несколько вкладок и у tablist есть aria-multiselectable, задайте tab атрибут aria-expanded, когда её содержимое видно. Если вкладка неактивна, у неё должно стоять противоположное значение aria-expanded="false".

Кроме обязательных атрибутов, элементам с ролью tab можно задавать все глобальные ARIA-атрибуты и некоторые атрибуты виджетов:

• aria-disabled;
• aria-haspopup;
• aria-posinset;
• aria-setsize.

Внутри tab лучше всего размещать текст. Если в названии вкладки иконка, не забудьте её подписать с помощью aria-label или добавить скрытую подпись с классом .visually-hidden.

Если вложите внутрь tab другой тег, например, <р>, у параграфа сбросится его встроенная роль и заменится на presentation. Поэтому скринридер прочтёт только текстовое содержимое. Так увидите код вы:

        
          
          <div role="tab">  <p>Я вкладка</p></div>
          <div role="tab">
  <p>Я вкладка</p>
</div>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

А так скринридер:

        
          
          <div role="tab">Я вкладка</div>
          <div role="tab">Я вкладка</div>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

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

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

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

Обычно визуально вкладки располагаются либо над их содержимым, либо сбоку от него. При клике или фокусе на вкладке появляется связанное с ней содержимое.

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