tabpanel

Как сделать элемент содержимым вкладки.

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

Кратко

Скопировано

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

Как понять

Скопировано

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

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

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