Атрибут 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-атрибутов и специализированных решений доступности.