В чате веб-стандартов не так давно обсуждали создание вкладок на основе ссылок, состояния в URL и псевдо-класса
:target. По итогу Артём Арутюнян написал об этом пост в своём канале. Для понимания механики работы предлагаю посмотреть доклад Ивана Бабкова. В комментариях к посту некоторые высказались против такой реализации по соображениям доступности. Это те самые CSS-хаки, о которых я не так давно писал.Вкладки из ссылок и
:target не такое уж плохое решение в условиях, когда нужно сделать быстро. Лучше так, чем <div>-ы с onclick и простым переключением классов. Ни то, ни другое нельзя назвать вкладками, но в первом случае получается решение без JS, с фокусируемыми семантическими ссылками на нужные части страницы. Технически всё работает как обычное интерактивное содержание с якорными ссылками и несколькими разделами. Разница в том, что разделы скрыты и не совсем очевидно, что они появляются при переходе по ссылке. UX не очень, но интерфейсом можно воспользоваться. При грамотной реализации через
hidden="until-found" даже поиск по странице будет работать.Но это не вкладки. Потому что вкладки — комплексный виджет с определёнными функциями и поведением. В веб они пришли из десктопа вместе с механикой работы и внешним видом. Для пользователей это привычный и понятный паттерн, встреча с которым формирует определённые ожидания. Вкладки будут вкладками только если соответствуют требованиям.
Роли
tablist, tab и tabpanel передают семантику. Добавление атрибута role — это обещание, что элемент работает определённым образом. Пользователи полагаются на это обещание и ожидают соответствующую структуру контента, вложенные элементы, клавиатурную навигацию и поведение. JS реагирует на события и меняет состояние.Добавление ролей к вкладкам из ссылок и
:target может показаться хорошей идеей для улучшения доступности. Но итоговый результат не выполняет обещание:- фокусируются все вкладки, а не только активная;
- вкладки переключаются клавишами
Tab/Shift+Tab вместо стрелок;- нет информации о том, выбрана вкладка или нет;
- при выборе вкладки фокус переносится на элемент панели вместо того, чтобы оставаться на вкладке;
- меняется текущий URL (фрагмент), что характерно для ссылок, но не вкладок;
- изменение URL сбрасывает состояние других вкладок на странице, чего происходить не должно.
Вывод такой: если вам нужны вкладки, не надо делать их с помощью
:target, радио-кнопок и прочих хаков. Правильная реализация использует ARIA и JS в соответствии с требованиями. Если нет времени разбираться и нужно быстрое решение — используйте готовые веб-компоненты, в которых кто-то уже позаботился о доступности. Вот мои рекомендации:- <sl-tab-group>
- <tab-container>
- <generic-tabs>
Или подумайте, нужны ли вам вообще вкладки. Может быть, простого размещения контента друг за другом в естественном потоке будет достаточно. Сделать это ещё проще и быстрее, чем вкладки с помощью
:target. И JS не понадобится, и думать о ролях, свойствах и обещаниях не придётся.#css #ux #a11y