Атрибут aria-* тега <svg>

Описание

Атрибуты aria-* (Accessible Rich Internet Applications) обеспечивают доступность SVG-контента для пользователей вспомогательных технологий. Они описывают семантику и состояние элементов.

Пример использования:
<svg role="img" aria-labelledby="chart-title chart-desc" width="300" height="200"> <title id="chart-title">График продаж</title> <desc id="chart-desc">Динамика продаж по кварталам 2023 года</desc> <!-- Графические элементы --> </svg>

Основные ARIA-атрибуты для SVG:

Атрибут Пример Назначение
aria-label aria-label="Иконка меню" Краткое описание элемента
aria-labelledby aria-labelledby="title1" Связь с текстовым описанием
aria-describedby aria-describedby="desc1" Связь с подробным описанием
aria-hidden aria-hidden="true" Скрытие от вспомогательных технологий
aria-current aria-current="page" Указание текущего элемента

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

  • Для иконок: Используйте role="img" с aria-label
  • Для графиков: Комбинируйте aria-labelledby и aria-describedby
  • Для интерактивных элементов: Добавляйте соответствующие роли (button, checkbox)
  • Для декоративных элементов: Применяйте aria-hidden="true"

Пример интерактивного SVG с ARIA:

<svg role="button" aria-label="Закрыть" tabindex="0" aria-pressed="false" width="40" height="40"> <circle cx="20" cy="20" r="18" fill="#e74c3c"/> <path stroke="#fff" stroke-width="3" d="M12,12 L28,28 M28,12 L12,28"/> </svg>

Ограничения и предупреждения:

  • Не дублируйте информацию, уже доступную через <title> и <desc>
  • Избегайте избыточного использования ARIA ("ARIA-порошок")
  • Всегда тестируйте с реальными скринридерами
  • Не заменяйте нативные HTML-элементы, когда они доступны

Примечание: Для комплексных интерактивных SVG-компонентов убедитесь, что они полностью доступны с клавиатуры и имеют визуальные состояния фокуса.