Генератор доступных вкладок (tabs)
Напишите заголовок и содержимое каждой вкладки, выберите стиль и скопируйте. Предпросмотр можно проверить мышью и стрелками клавиатуры.
Как пользоватьсяВкладки, которые работают с клавиатуры
Доступно на: 
Генератор доступных вкладок (tabs): для чего нужен
Вкладки раскладывают содержимое, например описание, размеры и доставку товара, на небольшом пространстве. Если сделать их небрежно, ими невозможно пользоваться с клавиатуры или экранным диктором.
Генератор следует стандарту Tabs из WAI-ARIA Authoring Practices: tablist, tab с aria-selected и tabpanel, связанные через aria-controls и aria-labelledby, в Tab попадает только активная вкладка, навигация стрелками, Home и End. Панели скрываются только после загрузки скрипта. Вы выбираете стиль с подчёркиванием или в виде таблетки и цвет.
Как пользоваться
- Напишите заголовок и содержимое каждой вкладки.
- Выберите стиль и цвет.
- Проверьте в предпросмотре и скопируйте код.
Когда использовать
- Детали товара в интернет-магазине.
- Тарифы или услуги бок о бок.
- Информация о мероприятии.
Частые вопросы
Что делает вкладки доступными?
Соблюдение стандарта Tabs из WAI-ARIA: у списка role=tablist, каждая вкладка — кнопка с role=tab и aria-selected, а у каждого содержимого role=tabpanel, связанный с вкладкой через aria-controls и aria-labelledby. В Tab попадает только активная вкладка; между вкладками человек переходит стрелками.
А если JavaScript не загрузится?
Код скрывает панели только после запуска скрипта. Без JavaScript всё содержимое показывается друг под другом, и ничего не становится недоступным.
Вкладки или аккордеон?
Вкладки хорошо работают при небольшом числе коротких заголовков на компьютере. При многих пунктах или длинных текстах, особенно на телефоне, обычно лучше аккордеон (вопросы, которые раскрываются и закрываются).
Правда бесплатно?
Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.