Атрибут tabindex тега <main>
Описание
Атрибут tabindex для тега <main> определяет, может ли основной контент страницы получать фокус и его позицию в последовательности перехода при навигации с клавиши Tab. По умолчанию <main> не участвует в навигации.
<main tabindex="0" id="main-content">
<h1>Доступный основной контент</h1>
<p>Теперь этот блок можно выделить через Tab.</p>
</main>
Значения атрибута:
| Значение | Описание | Использование |
|---|---|---|
-1 |
Элемент может получить фокус программно, но не через Tab | Для динамических интерфейсов |
0 |
Элемент включается в естественную последовательность навигации | Для улучшения доступности |
| Положительное число | Определяет явный порядок (1 → 2 → 3) | Не рекомендуется (нарушает логику DOM) |
Особенности работы с <main>:
- По умолчанию
<main>не фокусируем - С
tabindex="0"становится частью навигации - Полезно для быстрого перехода к основному контенту
- Часто используется с
idдля якорных ссылок
Пример улучшения доступности:
<a href="#main-content" class="skip-link">Перейти к содержанию</a>
<!-- Другие элементы интерфейса -->
<main id="main-content" tabindex="0">
<h1>Основной контент</h1>
<!-- Содержимое страницы -->
</main>
<style>
.skip-link {
position: absolute;
left: -9999px;
}
.skip-link:focus {
left: 0;
}
</style>
Рекомендации по использованию:
- Используйте
tabindex="0"для улучшения навигации - Избегайте положительных значений (нарушают естественный порядок)
- Сочетайте с JavaScript для сложных сценариев
- Добавляйте визуальные стили для фокусированного состояния
- Проверяйте порядок навигации в браузере
Стилизация фокуса:
<style>
main:focus {
outline: 3px solid #4CAF50;
background-color: #f8f9fa;
}
</style>
<main tabindex="0">
<h1>Контент с видимым фокусом</h1>
<p>При навигации Tab будет видно выделение.</p>
</main>
Примечание: Хотя добавление tabindex к <main> может улучшить доступность, злоупотребление этим атрибутом может нарушить естественный поток навигации. Используйте его осознанно, особенно для элементов, которые действительно должны получать фокус.