Практическая шпаргалка

Alt-текст для SVG: подпись, которая объясняет смысл

Подпись зависит от роли графики на конкретной странице. Значимому изображению нужно короткое полезное описание. Декоративный элемент лучше скрыть от скринридера. Иконке внутри уже подписанной кнопки обычно не нужна отдельная озвучка.

Используйте примеры как отправную точку и оценивайте SVG в контексте страницы. Бесплатный SVG Ready находит распространённые проблемы в разметке и создаёт фрагменты HTML или React. Он не может определить смысл изображения и не заменяет полноценную проверку доступности.

1. SVG как изображение через <img>

Для значимого внешнего SVG поместите короткое текстовое описание в атрибут alt. Опишите информацию или функцию, которую графика добавляет на страницу, а не цвет или форму.

<img src="payment-success.svg" alt="Платёж получен">

Если изображение ничего не добавляет к соседнему тексту, оставьте пустое значение alt, чтобы скринридер его пропустил.

<img src="sparkle-divider.svg" alt="">

2. Значимый встроенный SVG

Для встроенного SVG, который выступает одним значимым изображением, задайте роль изображения и свяжите его с коротким заголовком. Заголовок будет доступен скринридеру, поэтому пишите конкретно и без лишних слов.

<svg role="img" aria-labelledby="chart-title" viewBox="0 0 240 120">
  <title id="chart-title">Число регистраций выросло с 18 до 42 за месяц</title>
  <!-- графические элементы -->
</svg>

Если та же информация уже представлена в таблице или абзаце рядом, не повторяйте длинное описание. Для сложной диаграммы дополните графику реальным текстом с важными значениями и связями.

3. Декоративный встроенный SVG

Атрибут aria-hidden="true" убирает чисто декоративный SVG из дерева доступности. Не используйте его для графики с интерактивными или фокусируемыми элементами.

<svg aria-hidden="true" viewBox="0 0 24 24">
  <path d="…"></path>
</svg>

4. Иконка внутри кнопки или ссылки

Подписывайте саму кнопку или ссылку. Когда видимый текст уже объясняет действие, скройте иконку от скринридера, чтобы не дублировать объявление.

<button type="button">
  <svg aria-hidden="true" viewBox="0 0 24 24">…</svg>
  Сохранить изменения
</button>

Если в кнопке или ссылке только иконка, задайте элементу управления доступное имя, например aria-label="Закрыть окно". Название должно описывать действие, а не внешний вид значка.

5. Что проверить перед публикацией

• Определите роль SVG именно в этом месте: информативная, функциональная или декоративная.
• Для декоративного SVG, загруженного через <img>, используйте пустой атрибут alt="".
• Добавьте короткий полезный alt к значимому внешнему SVG.
• Дайте встроенному значимому SVG одно понятное имя, а декоративные контуры скройте от скринридера.
• Сделайте важные сведения графиков и диаграмм доступными в тексте страницы.
• Проверьте страницу скринридером и клавиатурой: анализатор разметки не знает, точна ли подпись.

Источники

• W3C WAI: руководство по изображениям — альтернативный текст для информативной, декоративной и функциональной графики.
• W3C WAI: декоративные изображения — когда использовать пустой текстовый эквивалент.
• MDN: роль ARIA img — как подписать встроенный SVG как единое изображение.
• MDN: элемент SVG title — роль заголовка SVG и доступное имя.

Read this guide in English · На главную SVG Ready