Атрибут tabindex тега <div>
Описание
Атрибут tabindex определяет, может ли элемент <div> получать фокус и его позицию в последовательности перехода по элементам при нажатии клавиши Tab.
<div tabindex="0">
Этот div может получать фокус (порядок по умолчанию)
</div>
<div tabindex="-1">
Этот div может получить фокус только программно
</div>
<div tabindex="1">
Этот div будет в начале последовательности фокуса (не рекомендуется)
</div>
Значения атрибута:
| Значение | Описание | Поведение |
|---|---|---|
0 |
Включение в естественную последовательность | Элемент получает фокус в порядке DOM |
-1 |
Исключение из последовательности | Фокус возможен только через JavaScript |
| Положительное число | Определение порядка | Элементы фокусируются от меньшего числа к большему (не рекомендуется) |
Правильное использование:
<!-- Хороший пример -->
<div tabindex="0" role="button" onclick="handleClick()">
Кликабельный div, доступный для клавиатуры
</div>
<!-- Плохой пример -->
<div tabindex="3">
Использование положительных чисел нарушает естественный порядок
</div>
Динамическое управление фокусом:
<div id="focusable-div" tabindex="-1">
Этот div получит фокус только по кнопке
</div>
<button onclick="focusDiv()">Установить фокус на div</button>
<script>
function focusDiv() {
document.getElementById('focusable-div').focus();
}
</script>
Стилизация состояния фокуса:
<style>
div[tabindex]:focus {
outline: 2px solid blue;
background-color: #f0f8ff;
box-shadow: 0 0 5px rgba(0,0,255,0.5);
}
div[tabindex] {
padding: 10px;
margin: 5px 0;
}
</style>
<div tabindex="0">
Этот div будет визуально выделяться при фокусе
</div>
Рекомендации по доступности:
- Используйте
tabindex="0"для интерактивных элементов, которые должны быть доступны с клавиатуры - Добавляйте соответствующие ARIA-роли (например,
role="button") - Избегайте положительных значений
tabindex- они нарушают естественный порядок - Всегда предусматривайте визуальное выделение при фокусе
- Для модальных окон используйте
tabindex="-1"и управляйте фокусом программно
Пример управления фокусом в модальном окне:
<button onclick="openModal()">Открыть модальное окно</button>
<div id="modal" tabindex="-1" role="dialog" style="display: none;">
<h2>Модальное окно</h2>
<p>Это контент модального окна</p>
<button onclick="closeModal()">Закрыть</button>
</div>
<script>
let lastFocusedElement;
function openModal() {
lastFocusedElement = document.activeElement;
const modal = document.getElementById('modal');
modal.style.display = 'block';
modal.focus();
}
function closeModal() {
document.getElementById('modal').style.display = 'none';
lastFocusedElement.focus();
}
</script>
Ограничения и особенности:
- Элементы с
tabindex="-1"не могут получить фокус через Tab - Порядок фокуса с положительными числами сложно поддерживать
- Браузеры могут по-разному обрабатывать некоторые случаи
- Использование без необходимости может ухудшить пользовательский опыт
Примечание: Атрибут tabindex - мощный инструмент для улучшения доступности, но требует продуманного использования. Всегда тестируйте порядок перехода фокуса с клавиатуры и обеспечивайте визуальную обратную связь при фокусировке.