Атрибут tabindex тега <audio>

Описание

Атрибут tabindex определяет, может ли элемент <audio> получать фокус при навигации по странице с помощью клавиши Tab, и в каком порядке.

Пример использования:
<audio controls tabindex="0"> <source src="audio.mp3" type="audio/mpeg"> </audio>

Значения атрибута:

Значение Поведение Рекомендации
0 Включает элемент в естественный поток навигации ✓ Для доступных плееров
-1 Позволяет фокусироваться программно, но не через Tab Для фоновых аудио
> 0 Задает кастомный порядок (не рекомендуется) ❌ Избегать
(отсутствует) Зависит от наличия controls По умолчанию

Особенности для <audio>:

  • Без controls элемент не фокусируется
  • С controls обычно фокусируемый по умолчанию
  • Положительные значения нарушают логический порядок
  • Фокус позволяет управлять с клавиатуры (пробел для play/pause)
Пример доступного плеера:
<audio controls tabindex="0" aria-label="Аудио подкаст о технологиях" > <source src="podcast.mp3" type="audio/mpeg"> </audio>

JavaScript управление фокусом:

const audio = document.querySelector('audio'); // Программная фокусировка audio.focus(); // Проверка поддержки console.log('Поддержка tabindex:', 'tabIndex' in audio);

Лучшие практики:

  • Используйте tabindex="0" для интерактивных плееров
  • Избегайте положительных значений (нарушают доступность)
  • Сочетайте с ARIA-атрибутами
  • Тестируйте навигацию только с клавиатуры

Важно: Использование tabindex > 0 считается антипаттерном доступности и нарушает естественный поток документа.

Проверка порядка фокуса:

// Получить все фокусируемые элементы const focusable = Array.from(document.querySelectorAll( 'a[href], button, input, select, textarea, audio[controls], [tabindex]' )).filter(el => el.tabIndex >= 0); console.log('Порядок фокуса:', focusable);

Совет: Для кастомных аудио-контролов назначайте tabindex отдельным интерактивным элементам (кнопкам, слайдерам).

Примечание: В большинстве современных браузеров <audio controls> фокусируем по умолчанию без явного указания tabindex.