Атрибут tabindex тега <video>
Описание
Атрибут tabindex определяет порядок перехода между элементами при навигации с помощью клавиши Tab. Для элемента <video> он контролирует, можно ли сфокусироваться на видео и в каком порядке.
<video tabindex="0" src="tutorial.mp4" controls></video>
Значения атрибута:
| Значение | Поведение | Когда использовать |
|---|---|---|
0 |
Включает элемент в естественный порядок табуляции | Когда видео должно быть доступно для клавиатурной навигации |
-1 |
Позволяет фокусироваться программно, но не через Tab | Для скрытых или управляемых через JS видео |
| Не указан | Зависит от наличия controls (по умолчанию focusable с controls) | Когда достаточно стандартного поведения |
Особенности работы:
- С элементами управления (controls) видео и так фокусируемо
- Без controls требует tabindex="0" для фокусировки
- Отрицательные значения исключают из обычной навигации
- Положительные значения нарушают естественный порядок (не рекомендуются)
Пример кастомного видеоплеера:
<div class="custom-player" tabindex="0">
<video src="video.mp4"></video>
<button tabindex="0">Play</button>
<button tabindex="0">Mute</button>
</div>
Рекомендации:
- Используйте tabindex="0" для кастомных видеоплееров
- Избегайте положительных значений (1, 2, ...)
- Для скрытых видео используйте tabindex="-1"
- Тестируйте навигацию с клавиатуры
Ограничения:
- Не изменяет порядок встроенных элементов управления
- Может конфликтовать с семантической структурой
- Требует ручной реализации обработки клавиш
Пример с обработкой клавиатуры:
<video id="kbVideo" tabindex="0" src="video.mp4"></video>
<script>
document.getElementById('kbVideo').addEventListener('keydown', (e) => {
if(e.key === ' ') { // Пробел - пауза/воспроизведение
e.preventDefault();
e.target.paused ? e.target.play() : e.target.pause();
}
});
</script>
Важно: При использовании tabindex:
- Не нарушайте естественный порядок навигации
- Обеспечьте визуальное выделение при фокусе
- Реализуйте обработку клавиш для кастомных элементов
Стили для фокуса:
<style>
video:focus {
outline: 2px solid #0066ff;
box-shadow: 0 0 4px rgba(0,102,255,0.5);
}
</style>
<video tabindex="0" src="video.mp4" controls></video>