Доступные вкладки (tablist)

Обновлено 14 октября 2026 г. · 5 мин чтения

На страницах товаров описание, характеристики, доставка и отзывы часто разбиты на вкладки. Если сделать правильно, вкладками быстро пользоваться с клавиатуры. Если сделать из элементов div с обработчиками щелчка, они скрывают большую часть информации о товаре от пользователей клавиатуры и экранных дикторов. Эта страница входит в серию доступных UI-паттернов.

Когда использовать вкладки

В APG вкладки определены как «многослойные разделы содержимого, называемые панелями вкладок, отображающие в каждый момент одну панель содержимого», где у каждой панели есть вкладка, показывающая её при активации. Используйте вкладки для нескольких связанных параллельных разделов схожей значимости, между которыми переключаются пользователи. Не используйте их для:

навигации между страницами — это ссылки в nav, даже если оформлены как вкладки; текущую отмечайте через aria-current="page";
длинного последовательного содержимого или более чем горстки разделов — используйте заголовки или аккордеон.

Применимые критерии WCAG

4.1.2 Имя, роль, значение (A): роли tab, tablist, tabpanel и выбранное состояние.
1.3.1 Информация и взаимосвязи (A): связь между вкладкой и панелью есть в коде.
2.1.1 Клавиатура (A): до всех вкладок можно добраться и активировать их с клавиатуры.
2.4.3 Порядок фокуса (A) и 2.4.7 Видимый фокус (AA).
1.4.11 Контраст нетекстового контента (AA): индикатор выбранной вкладки требует контраста 3:1.
1.4.1 Использование цвета (A): выбранная вкладка показана не только цветом.
1.4.10 Перекомпоновка (AA): вкладки работают и на экране шириной 320 CSS-пикселей.

Пример кода

<div class="tabs">
  <div role="tablist" aria-label="Информация о товаре">
    <button type="button" role="tab" id="tab-desc" aria-selected="true"
            aria-controls="panel-desc">Описание</button>
    <button type="button" role="tab" id="tab-specs" aria-selected="false"
            aria-controls="panel-specs" tabindex="-1">Характеристики</button>
    <button type="button" role="tab" id="tab-reviews" aria-selected="false"
            aria-controls="panel-reviews" tabindex="-1">Отзывы (12)</button>
  </div>

  <div role="tabpanel" id="panel-desc" aria-labelledby="tab-desc" tabindex="0">…</div>
  <div role="tabpanel" id="panel-specs" aria-labelledby="tab-specs" tabindex="0" hidden>…</div>
  <div role="tabpanel" id="panel-reviews" aria-labelledby="tab-reviews" tabindex="0" hidden>…</div>
</div>

Что должен делать скрипт:

Стрелки перемещают фокус между вкладками. Для этого используется плавающий tabindex (roving tabindex): у активной вкладки tabindex="0", у остальных tabindex="-1", как описано в руководстве APG по клавиатуре.
При активации: задать aria-selected="true" на новой вкладке и false на всех остальных, показать её панель и скрыть остальные через hidden.
У tablist есть aria-label или aria-labelledby, если есть видимый заголовок.
В APG сказано, что у панели «следует задать tabindex="0"», когда в ней нет содержимого, получающего фокус, или первое содержимое не получает фокус, чтобы до неё можно было дойти по Tab.
Вертикальному списку вкладок задаётся aria-orientation="vertical", и в нём используются стрелки вверх и вниз.

Работа с клавиатуры

Из шаблона вкладок из APG (горизонтальный список вкладок):

Клавиша	Действие
Tab	Перемещает фокус в список вкладок на активную вкладку; из списка — к панели или следующему элементу
Стрелка влево	Предыдущая вкладка; с первой переходит по кругу на последнюю. Может сразу активировать её
Стрелка вправо	Следующая вкладка; с последней переходит по кругу на первую. Может сразу активировать её
Пробел или Enter	Активирует вкладку, если она не активировалась при фокусе
Home / End	Необязательно: первая или последняя вкладка
Delete	Необязательно: закрывает вкладку, если удаление разрешено

Автоматическая и ручная активация. В APG сказано: «рекомендуется, чтобы вкладки активировались автоматически при получении фокуса», если панель отображается без заметной задержки, что обычно значит, что её содержимое уже загружено. Если для показа панели нужен сетевой запрос, автоматическая активация замедляет перемещение стрелками — тогда используйте ручную активацию по пробелу или Enter. В APG есть примеры обоих вариантов.

Частые ошибки в интернет-магазинах

Вкладки из элементов li или div с обработчиками щелчка: нет роли, нет клавиатуры, нет выбранного состояния.
Все вкладки в последовательности перехода по Tab и нет стрелок — или стрелки есть, но нет role="tab", и экранные дикторы не объявляют «вкладка 2 из 3».
aria-selected остаётся true на первой вкладке после выбора другой.
Панели скрыты через opacity: 0 или сдвинуты за пределы экрана, но всё ещё читаются и получают фокус.
Навигация, оформленная как вкладки с role="tab", при том что каждая «вкладка» загружает новую страницу.
Вкладка отзывов, загружаемая скриптом, и автоматическая активация, отправляющая запрос на каждое нажатие стрелки.
Выбранная вкладка показана лишь немного отличающимся цветом.

Что находит автоматика и что остаётся для ручной проверки

Автоматическая (правило axe-core)	Что находит
`aria-required-parent`	`role="tab"` вне `tablist`
`aria-required-children`	`role="tablist"` без дочерних `tab`
`aria-valid-attr-value`	`aria-controls`/`aria-labelledby`, указывающие на несуществующие ID; недопустимый `aria-selected`
`aria-allowed-attr`	Атрибуты, не допустимые для `tab` или `tabpanel`
`button-name`, `aria-command-name`	Вкладки без имени, например вкладки только со значком
`duplicate-id-aria`	Дублирующиеся ID, используемые в ссылках ARIA
`scrollable-region-focusable`	Прокручиваемые панели, до которых нельзя добраться с клавиатуры

Все они — карточки в нашей библиотеке правил. Ручная проверка: перейдите Tab в список вкладок, пользуйтесь стрелками, Home и End, убедитесь, что в последовательности перехода по Tab находится только одна вкладка, что панель меняется и что экранный диктор объявляет роль, позицию и выбранное состояние. Визуальный индикатор проверьте инструментом проверки контраста.

Запустите бесплатную проверку одной страницы на странице товара. Это автоматическая проверка, а не полный аудит.

Частые вопросы

Какие роли ARIA нужны доступным вкладкам?

Контейнер с role="tablist" и подписью, внутри него элементы с role="tab", у каждого aria-selected и aria-controls, и панели с role="tabpanel", подписанные своей вкладкой.

Как пользователи клавиатуры перемещаются между вкладками?

Tab входит в список вкладок на активную вкладку; стрелки влево и вправо перемещают между вкладками с переходом по кругу на краях; Home и End необязательны; следующий Tab переходит к панели. В последовательности перехода по Tab находится только одна вкладка.

Должна ли вкладка активироваться при фокусе или по Enter?

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

Что лучше на мобильной странице товара: вкладки или аккордеон?

Доступными могут быть оба. Вкладкам нужно место по горизонтали и полная модель работы с клавиатуры; аккордеон из кнопок раскрытия проще и хорошо работает на узких экранах. Многие магазины используют вкладки на компьютере и аккордеон на мобильном.

Может ли автоматическая проверка проверить вкладки?

Она находит роли tab вне tablist, tablist без вкладок, aria-controls, указывающие на несуществующие ID, и недопустимые значения aria-selected. Проверить стрелки или то, меняется ли aria-selected при выборе другой вкладки, она не может.

Источники

W3C WAI, APG Tabs pattern: https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
W3C WAI, APG Developing a Keyboard Interface (roving tabindex): https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/