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

Описание

Атрибут title для тега <audio> задает всплывающую подсказку (tooltip), которая появляется при наведении курсора на аудио-элемент. Это текстовое описание содержимого или функциональности плеера.

Пример использования:
<audio controls title="Прослушать подкаст 'Веб-технологии сегодня'"> <source src="podcast.mp3" type="audio/mpeg"> </audio>

Особенности работы:

Платформа Поведение Ограничения
Десктопные браузеры Подсказка появляется при наведении Задержка ~1-2 сек
Мобильные устройства Часто недоступен Нет события hover
Скринридеры Может озвучиваться как метка Зависит от реализации

Рекомендации по использованию:

  • Используйте краткие описательные тексты (до 60 символов)
  • Не дублируйте видимый текст на странице
  • Для важной информации используйте видимые элементы
  • Сочетайте с aria-label для лучшей доступности
Пример с доступной альтернативой:
<div class="audio-container"> <h3 id="audio-title">Подкаст "Веб-технологии сегодня"</h3> <audio controls aria-labelledby="audio-title"> <source src="podcast.mp3" type="audio/mpeg"> </audio> </div>

JavaScript доступ к title:

const audio = document.querySelector('audio'); console.log('Текущий title:', audio.title); // Динамическое изменение audio.title = 'Новое описание аудио';

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

  • Не используйте для критической информации
  • Избегайте сложного форматирования
  • Для многоязычных сайтов динамически обновляйте
  • Тестируйте в разных браузерах

Ограничения: Подсказки title ненадежны для мобильных устройств и могут быть отключены в настройках браузера.

Сравнение с аналогичными атрибутами:

Атрибут Преимущества Недостатки
title Простота использования Ограниченная доступность
aria-label Лучшая поддержка скринридерами Не виден визуально
Видимый текст Доступен всем пользователям Занимает место на странице

Совет: Для важных подсказок используйте современные CSS-решения (кастомные tooltip'ы) вместо атрибута title.

Примечание: В некоторых браузерах содержимое title может обрезаться, если не помещается в одну строку.