Атрибут tabindex тега <button>
Описание
Атрибут tabindex определяет порядок перехода между элементами при навигации с помощью клавиши Tab. Для кнопок он особенно важен для управления доступностью и клавиатурной навигацией.
<button tabindex="1">Первая кнопка</button>
<button tabindex="2">Вторая кнопка</button>
<button tabindex="0">В естественном порядке</button>
| Значение | Поведение | Рекомендации |
|---|---|---|
0 |
Включает элемент в естественный порядок табуляции | Для всех интерактивных элементов |
-1 |
Исключает из табуляции, но доступен через JS | Для всплывающих элементов |
| Положительное число | Задает явный порядок (1, 2, 3...) | Избегайте - нарушает естественный поток |
Правильное использование:
<!-- Хорошая практика -->
<button tabindex="0">Основное действие</button>
<button tabindex="-1" id="modal-btn">Модальное окно</button>
<script>
// Делаем кнопку доступной при открытии модального окна
document.getElementById('modal-btn').tabIndex = 0;
</script>
Особенности доступности:
- Кнопки по умолчанию имеют tabindex="0"
- Элементы с tabindex="-1" можно фокусировать программно
- Порядок табуляции должен соответствовать визуальному потоку
- Проверяйте с помощью клавиши Tab
Распространенные ошибки:
<!-- Плохая практика -->
<button tabindex="5">Кнопка 1</button>
<button tabindex="3">Кнопка 2</button>
<button tabindex="1">Кнопка 3</button>
Примечание: Для большинства кнопок не нужно явно указывать tabindex. Используйте его осознанно, только когда требуется изменить естественный порядок навигации.