Кратко
СкопированоСамостоятельная роль виджета из 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
пригодится приём с отрицательным и положительным значениями tabindex
. Для активной вкладки добавьте tabindex
, а для неактивной tabindex
. Так при нажатии Tab попадём на первую или ранее выбранную вкладку, а к другим вкладкам так уже переместиться не сможем. Не забудьте отслеживать события и переключать значение tabindex
с помощью JavaScript.
tab
обязательно должна быть связана с содержимым из tabpanel
. Для этого задайте атрибут aria
для 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
. Он указывает на то, выбрана вкладка или нет. У выбранной вкладки должен быть aria
, у неактивной вкладки или без явно указанного атрибута — aria
. Так что тут опять не обойтись без 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
, задайте tab
атрибут aria
, когда её содержимое видно. Если вкладка неактивна, у неё должно стоять противоположное значение aria
.
Кроме обязательных атрибутов, элементам с ролью tab
можно задавать все глобальные ARIA-атрибуты и некоторые атрибуты виджетов:
Внутри tab
лучше всего размещать текст. Если в названии вкладки иконка, не забудьте её подписать с помощью aria
или добавить скрытую подпись с классом .visually
.
Если вложите внутрь 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 для закрытия текущей вкладки и перехода к следующей или предыдущей в зависимости от количества вкладок.
Как понять
СкопированоОбычно визуально вкладки располагаются либо над их содержимым, либо сбоку от него. При клике или фокусе на вкладке появляется связанное с ней содержимое.
Устройство вкладок в виде схемы: