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


Описание

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

  • Описания назначения canvas-элемента
  • Добавления пояснений для сложной графики
  • Улучшения доступности (в сочетании с ARIA)
Пример использования:
<canvas id="chartCanvas" width="400" height="300" title="График изменения цен за последний год" ></canvas>
Аспект Поведение Особенности
Отображение Всплывающая подсказка при наведении Зависит от браузера/ОС
Доступность Частично поддерживается скринридерами Лучше использовать aria-label
Содержимое Только текст (без HTML-разметки) Короткие описания (1-2 предложения)

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

1. Описание сложного графика:
<canvas id="weatherChart" width="600" height="400" title="Температура и осадки по месяцам. Красная линия - температура, синие столбцы - осадки." ></canvas>
2. Интерактивный canvas с подсказкой:
<canvas id="interactiveCanvas" width="300" height="300" title="Нажмите для выбора цвета. Двойной щелчок - очистить." tabindex="0" ></canvas>

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

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

Сравнение с ARIA-атрибутами:

<!-- Просто подсказка --> <canvas title="График производительности"></canvas> <!-- Полноценное описание для доступности --> <canvas aria-label="График производительности" aria-describedby="chartDesc" ></canvas> <p id="chartDesc" hidden>Линейный график, показывающий изменение производительности системы...</p>

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

  • Не влияет на содержимое canvas (только всплывающая подсказка)
  • Может конфликтовать с кастомными tooltip-решениями
  • На мобильных устройствах часто не отображается
  • Поддерживается всеми современными браузерами

Примечание: Хотя атрибут title обеспечивает базовую доступность, для сложных canvas-приложений рекомендуется использовать комбинацию ARIA-атрибутов и специализированных решений доступности.