Атрибут tabindex тега <details>
Описание
Атрибут tabindex позволяет управлять порядком перехода между элементами при навигации по странице с помощью клавиши Tab. Для элемента <details> он определяет, можно ли сфокусировать элемент и его положение в последовательности фокусировки.
Особенность: По умолчанию
Пример использования:
<details> не участвует в последовательности табуляции, но может получить фокус программно.
<details tabindex="0">
<summary>Доступный раздел (можно фокусировать)</summary>
<p>Этот блок теперь можно открывать с клавиатуры.</p>
</details>
<details tabindex="-1">
<summary>Программно управляемый раздел</summary>
<p>Фокус возможен только через JavaScript.</p>
</details>
Значения атрибута:
| Значение | Описание | Использование |
|---|---|---|
0 |
Включает элемент в естественный порядок табуляции | Для важных раскрывающихся блоков |
-1 |
Позволяет фокусировать элемент только программно | Для динамически управляемых элементов |
| Положительное число | Задает явный порядок (не рекомендуется) | Лучше избегать |
Практическое применение:
<style>
details:focus {
outline: 2px solid #4CAF50;
box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
}
</style>
<details tabindex="0" id="keyboard-accessible">
<summary>Доступный с клавиатуры блок</summary>
<p>Нажмите Enter или пробел для раскрытия.</p>
</details>
<script>
// Обработка клавиш для раскрытия
document.getElementById('keyboard-accessible').addEventListener('keydown', function(e) {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
this.open = !this.open;
}
});
</script>
Рекомендации по доступности:
- Всегда добавляйте визуальный стиль для фокуса
- Для аккордеонов устанавливайте
tabindex="0"только на активный элемент - Обеспечьте клавиатурное управление (Enter/Space для переключения)
- Используйте ARIA-атрибуты для улучшения семантики
- Тестируйте с различными браузерами и устройствами
Пример аккордеона с правильной табуляцией:
<div class="accordion">
<details tabindex="0">
<summary>Раздел 1</summary>
<p>Содержимое первого раздела.</p>
</details>
<details tabindex="-1">
<summary>Раздел 2</summary>
<p>Содержимое второго раздела.</p>
</details>
</div>
<script>
// Управление табуляцией в аккордеоне
document.querySelectorAll('.accordion details').forEach(details => {
details.addEventListener('toggle', function() {
if (this.open) {
this.tabIndex = 0;
this.querySelector('summary').setAttribute('aria-expanded', 'true');
// Делаем другие элементы недоступными для табуляции
document.querySelectorAll('.accordion details:not([open])').forEach(other => {
other.tabIndex = -1;
other.querySelector('summary').setAttribute('aria-expanded', 'false');
});
}
});
});
</script>
Ограничения и совместимость:
- Разные браузеры могут по-разному обрабатывать фокус
- На мобильных устройствах поведение может отличаться
- Не заменяет полноценную клавиатурную навигацию
- Может конфликтовать с системными сочетаниями клавиш
Примечание: Хотя tabindex улучшает доступность <details>, для сложных интерактивных элементов рекомендуется использовать ARIA-роли (например, role="button") и JavaScript-обработчики для полного контроля над поведением.