tabindex: порядок фокуса без положительных чисел
Атрибут tabindex управляет возможностью фокусировки элемента и его участием в последовательной навигации клавишей Tab.
Назначение
Атрибут tabindex управляет возможностью фокусировки элемента и его участием в последовательной навигации клавишей Tab.
Как это работает
Значение 0 включает элемент в естественный порядок, а -1 обычно исключает из Tab, сохраняя возможность программной фокусировки. Кнопки и ссылки с href уже имеют необходимое поведение без tabindex.
Пример
<a href="#result">Перейти к результату</a>
<h2 id="result" tabindex="-1">Результат проверки</h2>
<button type="button">Следующее действие</button>Что должно получиться
Кнопка и ссылка входят в обычный порядок Tab. Заголовок не добавляет лишнюю остановку, но может служить целью управляемого перемещения фокуса.
Граница применения и частая ошибка
Положительные числа создают отдельный порядок и легко расходятся с визуальной структурой. Не превращайте div в кнопку одним tabindex: у него не появится полноценная клавиатурная активация.
Самостоятельная проверка
Пройдите пример клавишей Tab и сравните с порядком элементов в HTML. В отдельном проекте вызовите focus() для заголовка с -1 и убедитесь, что дальнейшая навигация остаётся предсказуемой.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.