Атрибут role тега <svg>

Описание

Атрибут role определяет семантическую роль элемента <svg> для технологий доступности (скринридеров). Он помогает правильно интерпретировать назначение SVG-графики.

Пример использования:
<svg role="img" width="100" height="100" aria-label="Круглая диаграмма"> <circle cx="50" cy="50" r="40" fill="#3498db"/> </svg>

Распространённые значения role:

Значение Применение Рекомендации
img Декоративные изображения, иконки Используйте с aria-label
presentation Чисто декоративные элементы Только когда SVG не несёт смысла
graphics-document Сложная графика с информацией Для диаграмм, схем, графиков

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

  • Влияет на то, как скринридеры объявляют элемент
  • Должен соответствовать реальному назначению SVG
  • Работает в сочетании с ARIA-атрибутами
  • Наследуется только для некоторых ролей

Пример для интерактивной графики:

<svg role="button" tabindex="0" aria-label="Увеличить" width="50" height="50"> <circle cx="25" cy="25" r="20" fill="#e74c3c"/> <text x="25" y="30" text-anchor="middle" fill="white">+</text> </svg>

Рекомендации:

  • Всегда указывайте role="img" для значимых изображений
  • Для декоративных элементов используйте role="presentation"
  • Сочетайте с aria-label или aria-labelledby
  • Для сложной графики добавляйте текстовое описание

Ограничения:

  • Неправильная роль может ухудшить доступность
  • Не заменяет текстовые альтернативы
  • Поддержка зависит от браузера и скринридера

Примечание: Для комплексных интерактивных SVG-элементов используйте соответствующие ARIA-роли (button, checkbox и др.) и обеспечивайте клавиатурную навигацию.