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

Описание

Атрибут lang для тега <audio> указывает язык основного текстового содержимого элемента. Хотя сам тег audio не содержит видимого текста, этот атрибут может влиять на:

  • Озвучивание интерфейса скринридерами
  • Автоматический перевод элементов управления
  • Выбор субтитров/метаданных
Пример использования:
<audio controls lang="ru"> <source src="podcast.mp3" type="audio/mpeg"> Ваш браузер не поддерживает аудио элемент. </audio>

Формат значений:

Тип Пример Описание
Основной код языка en, ru, es ISO 639-1 коды
Расширенный код zh-CN, pt-BR Язык + регион
Специальные значения sr-Latn Варианты письменности

Практическое применение:

1. Доступность для скринридеров:
<audio controls lang="en" aria-label="English podcast"> <source src="podcast-en.mp3" type="audio/mpeg"> </audio>
2. Многоязычные субтитры:
<audio controls lang="fr"> <source src="lecture.mp3" type="audio/mpeg"> <track src="subtitles-fr.vtt" kind="subtitles" srclang="fr" label="Français"> <track src="subtitles-en.vtt" kind="subtitles" srclang="en" label="English"> </audio>

Определение языка через JavaScript:

const audio = document.querySelector('audio'); console.log('Текущий язык:', audio.lang || 'не указан'); // Установка языка audio.lang = 'es'; audio.setAttribute('aria-label', 'Podcast en español');

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

  • Указывайте язык для аудио с речью
  • Для инструментальной музыки используйте lang="zxx"
  • Сочетайте с ARIA-атрибутами для лучшей доступности
  • Для многоязычного контента используйте вложенные элементы

Ограничения: Большинство браузеров не изменяют стандартные элементы управления в зависимости от языка.

Пример с динамическим языком:

<audio id="multilang-audio" controls> <source src="content.mp3" type="audio/mpeg"> </audio> <button onclick="setAudioLang('en')">English</button> <button onclick="setAudioLang('ru')">Русский</button> <script> function setAudioLang(lang) { const audio = document.getElementById('multilang-audio'); audio.lang = lang; // Здесь можно загрузить соответствующие треки/subtitles } </script>

Совет: Для многоязычных приложений указывайте язык на контейнере страницы (<html lang="...">) и переопределяйте для конкретных элементов при необходимости.

Примечание: Атрибут lang наследуется от родительских элементов, поэтому его не обязательно указывать для каждого audio-элемента, если язык документа уже задан.