aria-selected и шаблоны вкладок
Реализуйте интерфейсы вкладок, доступные с клавиатуры
«aria-selected и шаблоны вкладок» — бесплатный урок HTML Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.
Обзор шаблона вкладок
Интерфейс вкладок состоит из трёх компонентов ARIA:
role="tablist"— container для всех вкладокrole="tab"— отдельная кнопка вкладкиrole="tabpanel"— панель содержимого каждой вкладки
Структура вкладок ARIA
Полная разметка доступных вкладок:
<div role="tablist" aria-label="Account Settings">
<button role="tab" id="tab-1" aria-selected="true"
aria-controls="panel-1">Profile</button>
<button role="tab" id="tab-2" aria-selected="false"
aria-controls="panel-2" tabindex="-1">Security</button>
<button role="tab" id="tab-3" aria-selected="false"
aria-controls="panel-3" tabindex="-1">Notifications</button>
</div>
<div id="panel-1" role="tabpanel" aria-labelledby="tab-1">
Profile content...
</div>
<div id="panel-2" role="tabpanel" aria-labelledby="tab-2" hidden>
Security content...
</div>aria-selected
aria-selected указывает текущий активный элемент в контексте выбора:
<!-- In a tablist: -->
<button role="tab" aria-selected="true">Active Tab</button>
<button role="tab" aria-selected="false">Other Tab</button>
<!-- In a listbox: -->
<ul role="listbox">
<li role="option" aria-selected="false">Option 1</li>
<li role="option" aria-selected="true">Option 2</li>
</ul>Клавиатурный шаблон вкладок
Шаблоны ARIA определяют специальное поведение вкладок с клавиатурой:
- Tab — перемещает focus в список вкладок, на выбранную вкладку
- Arrow keys — циклически перемещают между вкладками
- Повторное нажатие Tab — перемещает focus из списка вкладок на активную панель
- Home — первая вкладка
- End — последняя вкладка
Реализация клавиатурной навигации по вкладкам
Клавиатурная навигация по вкладкам с помощью клавиш со стрелками:
const tabs = document.querySelectorAll('[role="tab"]');
tabs.forEach((tab, i) => {
tab.addEventListener('keydown', (e) => {
let target;
if (e.key === 'ArrowRight') target = tabs[(i + 1) % tabs.length];
if (e.key === 'ArrowLeft') target = tabs[(i - 1 + tabs.length) % tabs.length];
if (e.key === 'Home') target = tabs[0];
if (e.key === 'End') target = tabs[tabs.length - 1];
if (target) {
activateTab(target);
target.focus();
}
});
});Функция activateTab
Функция для переключения вкладок и обновления ARIA:
function activateTab(selectedTab) {
// Deactivate all tabs:
document.querySelectorAll('[role="tab"]').forEach(tab => {
tab.setAttribute('aria-selected', 'false');
tab.setAttribute('tabindex', '-1');
document.getElementById(tab.getAttribute('aria-controls')).hidden = true;
});
// Activate selected tab:
selectedTab.setAttribute('aria-selected', 'true');
selectedTab.setAttribute('tabindex', '0');
document.getElementById(selectedTab.getAttribute('aria-controls')).hidden = false;
}Шаблон перемещаемого tabindex
Группы вкладок используют перемещаемый tabindex, чтобы в порядке перехода с клавиатуры находилась одна вкладка:
<!-- Only the selected tab has tabindex=0 -->
<button role="tab" aria-selected="true" tabindex="0">Active</button>
<button role="tab" aria-selected="false" tabindex="-1">Other</button>
<button role="tab" aria-selected="false" tabindex="-1">Another</button>
<!-- When user arrows to a new tab:
1. Set new tab tabindex=0
2. Set old tab tabindex=-1
3. Focus new tab -->aria-selected и aria-checked
aria-selected и aria-checked — для разных контекстов:
aria-selected— используется в виджетах выбора: вкладках, вариантах в списке выбора, элементах дереваaria-checked— используется в элементах с возможностью отметки: флажках, пунктах меню с галочкой
Focus панели вкладки
При активации вкладки панель становится видимой, но focus остаётся на вкладке:
// Users can then Tab to move into the panel content
// The panel should not automatically receive focus
// Exception: if the panel is very long, consider moving focus
// to the panel heading for long-form content tabs
// Panel should have tabindex=-1 for programmatic focus:
<div id="panel-1" role="tabpanel" aria-labelledby="tab-1" tabindex="-1">Автоматическая и ручная активация
Две модели активации вкладок:
- Автоматическая — вкладки активируются, когда пользователь перемещается по ним стрелками (более простой интерфейс)
- Ручная — после перемещения стрелками пользователь должен нажать Enter/Space для активации (лучше, если содержимое вкладки требует загрузки)
Стилизация доступных вкладок
CSS для состояния выбранной доступной вкладки:
[role="tab"] {
border-bottom: 3px solid transparent;
padding: 0.75rem 1rem;
cursor: pointer;
}
[role="tab"][aria-selected="true"] {
border-bottom-color: #0070f3;
font-weight: bold;
}
/* :focus-visible for keyboard users: */
[role="tab"]:focus-visible {
outline: 2px solid #0070f3;
outline-offset: -2px;
}Быстрая проверка
Как должна работать клавиатурная навигация в списке вкладок?
Итоги: aria-selected и вкладки
Основы шаблона вкладок:
- tablist → tab (aria-selected) → tabpanel (aria-labelledby)
- Клавиши со стрелками перемещают между вкладками; Tab переходит на панель
- Перемещаемый tabindex: только активная вкладка имеет tabindex=0
- На активной вкладке установлено aria-selected="true"
- Неактивные панели используют атрибут hidden
Часто задаваемые вопросы
Урок «aria-selected и шаблоны вкладок» бесплатный?
Да — полный текст урока «aria-selected и шаблоны вкладок» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.
Чему я научусь в уроке «aria-selected и шаблоны вкладок»?
Реализуйте интерфейсы вкладок, доступные с клавиатуры Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать HTML Academy?
Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «aria-selected и шаблоны вкладок»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке HTML Academy?
Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- aria-expanded и aria-controls для переключателей
- aria-selected и шаблоны вкладок
- Живые области: aria-live aria-atomic aria-relevant
- Тестирование с экранными дикторами