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.

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

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

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

Обязательно свяжите содержимое tabpanel с нужной вкладкой 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 для закрытия текущей вкладки и перехода к следующей или предыдущей в зависимости от количества вкладок.

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

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