Атрибут tabindex тега <section>
Описание
Атрибут tabindex определяет порядок перехода между элементами при навигации с помощью клавиши Tab. Для тега <section> он позволяет включать секцию в последовательность фокусируемых элементов.
<section tabindex="0">
<h2>Фокусируемая секция</h2>
<p>Теперь эту секцию можно выделить клавишей Tab.</p>
</section>
Значения атрибута:
| Значение | Описание | Когда использовать |
|---|---|---|
-1 |
Элемент может получить фокус программно, но не включается в последовательность табуляции | Для всплывающих окон, скрытых элементов |
0 |
Элемент включается в естественную последовательность табуляции | Для обычных фокусируемых блоков |
>0 |
Определяет явный порядок табуляции (1, 2, 3...) | Для специальных сценариев навигации |
Особенности работы:
- По умолчанию
<section>не участвует в табуляции - При фокусе элемент получает outline (можно стилизовать через CSS)
- Значения больше 0 нарушают естественный поток документа
- Поддерживается всеми современными браузерами
Пример с несколькими секциями:
<section tabindex="0">
<h2>Первая секция</h2>
<p>Фокус по порядку документа</p>
</section>
<section tabindex="0">
<h2>Вторая секция</h2>
<p>Следующая в последовательности Tab</p>
</section>
Рекомендации:
- Используйте
tabindex="0"для важных информационных блоков - Избегайте положительных значений (>0) без крайней необходимости
- Добавляйте визуальные стили для состояния :focus
- Тестируйте навигацию с клавиатуры
Ограничения:
- Неправильное использование может ухудшить доступность
- Положительные значения создают путаницу в порядке табуляции
- Фокусируемые секции должны иметь смысл для скринридеров
Пример с CSS-стилизацией:
<style>
section:focus {
outline: 3px solid #4a90e2;
box-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
}
</style>
<section tabindex="0">
<h2>Стилизованный фокус</h2>
<p>Эта секция получит синий контур при фокусе.</p>
</section>