Доступні вкладки (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: активна вкладка має tabindex="0", решта — tabindex="-1", як описано в посібнику APG з клавіатури.
Під час активації: задайте aria-selected="true" на новій вкладці та false на всіх інших, покажіть її панель і сховайте решту через hidden.
tablist має aria-label або aria-labelledby, якщо є видимий заголовок.
APG каже, що панель «має задавати tabindex="0"», коли в ній немає вмісту, що може отримати фокус, або її перший вміст не може отримати фокус, щоб Tab міг до неї дістатися.
Вертикальний список вкладок отримує aria-orientation="vertical" і використовує стрілки вгору та вниз.

Взаємодія з клавіатури

З патерну вкладок APG (горизонтальний список вкладок):

Клавіша	Функція
Tab	Переміщує фокус у список вкладок на активну вкладку; зі списку — на панель або наступний елемент
Стрілка вліво	Попередня вкладка; з першої — на останню. За бажання активує її
Стрілка вправо	Наступна вкладка; з останньої — на першу. За бажання активує її
Space або Enter	Активує вкладку, якщо її не було активовано при фокусі
Home / End	Необов'язково: перша чи остання вкладка
Delete	Необов'язково: закриває вкладку, якщо видалення дозволено

Автоматична чи ручна активація. APG каже: «рекомендується, щоб вкладки активувалися автоматично, коли отримують фокус», якщо панель відображається без помітної затримки, що зазвичай означає, що її вміст уже завантажено. Якщо для показу панелі потрібен мережевий запит, автоматична активація робить навігацію стрілками повільною — тоді використовуйте ручну активацію через Space або 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 або Space.

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

Обидва можуть бути доступними. Вкладкам потрібне місце по горизонталі й повна модель клавіатури; акордеон із кнопок розкриття простіший і добре працює на вузьких екранах. Багато магазинів використовують вкладки на десктопі та акордеон на мобільному.

Чи може автоматична перевірка протестувати вкладки?

Вона знаходить ролі 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/