Компонент вкладок: приём :checked и JS

Компоненту вкладок необходимы: визуальный индикатор активной вкладки, связанная с ней панель, отображаемая или скрытая при выборе, навигация между вкладками с клавиатуры и доступные атрибуты ARIA. Всё это можно реализовать с помощью чистого CSS, используя приём на основе проверенного состояния, или с помощью JavaScript для более полной поддержки доступности.

Скрытые радиопереключатели служат состоянием: каждая вкладка является элементом <label>, связанным с радиопереключателем. Когда радиопереключатель выбран, комбинаторы соседних элементов CSS показывают соответствующую панель и стилизуют метку активной вкладки. JavaScript не требуется.

Разместите в одном контейнере сначала радиопереключатели, затем все метки (вкладки), а после них — все панели. Используйте общий комбинатор соседних элементов (~), чтобы связать выбранный радиопереключатель с соответствующей панелью. По умолчанию панели получают display: none; соответствующая панель получает display: block.

Приём с проверенным состоянием не может обновлять атрибуты ARIA, обозначающие выбранность и связь с панелью, не позволяет включить навигацию между вкладками стрелками, а ограничения порядка элементов в DOM (переключатели должны находиться перед панелями) могут конфликтовать с требованиями визуального дизайна. Эти недостатки ограничивают полноценную доступность.

Компонент вкладок на JS отслеживает события щелчка по кнопкам вкладок, устанавливает признак выбранной вкладки, обновляет состояние скрытия панелей и управляет фокусом. Такой подход обеспечивает полное соответствие ARIA и шаблоны взаимодействия с клавиатурой согласно рекомендациям ARIA по разработке.

Используйте role="tablist" для контейнера, role="tab" для каждой кнопки вкладки вместе с aria-selected и aria-controls, а role="tabpanel" — для каждой панели вместе с aria-labelledby. Программы чтения с экрана озвучивают количество вкладок, позицию и состояние выбранности.

Рекомендации ARIA по разработке вкладок: клавиша Tab входит в список вкладок и переводит фокус на активную вкладку. Стрелки влево и вправо перемещают фокус между вкладками. Клавиши Home и End переходят к первой и последней вкладке. Каждое перемещение стрелкой активирует сфокусированную вкладку — это шаблон автоматической активации.

Стилизуйте активную вкладку с помощью нижней границы или изменения фона, используя селектор [aria-selected="true"]; он работает и с подходом на JS, и с подходом с проверенным состоянием. Так CSS синхронизируется с атрибутом состояния ARIA, не требуя двойного управления состоянием.

Анимированный индикатор вкладок перемещается между вкладками: разместите абсолютно позиционированный элемент-индикатор, с помощью JavaScript задайте его положение по горизонтали и ширину в соответствии с размерами активной вкладки и добавьте анимацию с помощью transition: left 200ms ease, width 200ms ease.

Если на небольших экранах вкладки выходят за пределы контейнера, используйте горизонтальную прокрутку (overflow-x: auto; scrollbar-width: none) или на мобильных устройствах сворачивайте их в раскрывающийся список. Подход с раскрывающимся списком требует синхронизации встроенного списка выбора с видимостью панели вкладок с помощью JS.

Используйте трюк с :checked для простого некритичного интерфейса, где доступность не является приоритетным требованием. Используйте вкладки на JavaScript для любого готового к эксплуатации интерфейса, предназначенного для пользователей клавиатуры, пользователей программ чтения с экрана или приложений, которым требуется соответствие ARIA при аудитах или в силу юридических требований.

Каково основное ограничение доступности трюка с CSS :checked для вкладок?

Трюк с :checked позволяет переключать вкладки только средствами CSS с помощью радиокнопок и комбинаторов соседних элементов, но не обеспечивает поддержку ARIA и доступность с клавиатуры. Вкладки на JavaScript с ролями ARIA (tablist, tab, tabpanel), управлением aria-selected и обработкой клавиш стрелок обеспечивают полноценный доступный интерфейс, необходимый для готовых к эксплуатации компонентов.