tabpanel

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

В HTML нет эквивалента для роли tabpanel.

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

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

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

Роль tabpanel можно задать любому тегу, но лучше всего подходят нейтральные <div> и <span>.

Элемент с ролью tabpanel обязательно должен находится внутри другого с ролью tablist и быть связанным с нужным tab. Для этого используйте атрибут 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>

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

Другой способ связать tabpanel с tab — использовать атрибут aria-labelledby для содержимого вкладки.

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

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

У aria-controls пока плохая поддержка, так что часто для надёжности этот атрибут совмещают с aria-labelledby.

Элементам с ролью tabpanel можно также задавать все остальные глобальные ARIA-атрибуты и некоторые атрибуты виджетов.

Содержимое вкладки тоже должно получать фокус с клавиатуры, как сама вкладка. Поэтому задайте tabpanel атрибут tabindex со значением 0. В этом случае пользователь попадёт на связанное содержимое активной вкладки, если нажмёт на Tab.

Когда вкладка неактивна, то нужно скрыть связанное с ней содержимое tabpanel. Это можно сделать с помощью атрибута hidden или CSS-свойств display: none или visibility: hidden. Важно выбрать способ, который точно скроет содержимое вкладки не только визуально, но и от скринридера. Больше узнать об этом можно из «Как скрыть содержимое от скринридеров».

Внутри tabpanel можно размещать любое содержимое, не только текст.

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

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

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

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