Практическое руководство для React

Доступные SVG-иконки в React

Начните с вопроса: иконка сообщает новую информацию или её смысл уже передан соседним текстом? От ответа зависит, нужно ли дать SVG имя или скрыть его от вспомогательных технологий.

Примеры ниже относятся к встроенным SVG-компонентам и внешним файлам через <img>. Они помогают найти распространённые ошибки разметки, но не подтверждают соответствие страницы WCAG. Вставьте отдельный SVG в бесплатную проверку SVG Ready, чтобы проверить подписи, ссылки на ID и другие базовые проблемы.

1. Иконка рядом с текстом кнопки

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

function SaveButton() {
  return (
    <button type="button">
      <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">
        <path d="…" />
      </svg>
      Сохранить изменения
    </button>
  );
}

2. Кнопка только с иконкой

Подпишите саму кнопку. Так действие будет понятно всем, а SVG не придётся отвечать одновременно за роль графики и смысл элемента управления.

function CloseButton({ onClose }) {
  return (
    <button type="button" aria-label="Закрыть окно" onClick={onClose}>
      <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">
        <path d="…" />
      </svg>
    </button>
  );
}

3. Самостоятельная значимая иконка

Если графика сама передаёт информацию, укажите роль изображения и короткое имя. Для внешнего SVG передайте текстовую альтернативу через атрибут alt элемента <img>.

function StatusIcon() {
  return (
    <svg role="img" aria-label="Платёж получен" viewBox="0 0 24 24">
      <path d="…" />
    </svg>
  );
}

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

4. Повторяемые иконки и одинаковые ID

ID в SVG должны быть уникальны в документе. Если повторно отрисовать ID вроде title, ссылка aria-labelledby может указывать не на тот текст. Генерируйте уникальный ID с помощью React useId или используйте прямой aria-label, если короткой фиксированной подписи достаточно.

import { useId } from "react";

function NamedGraphic({ label }) {
  const titleId = useId();
  return (
    <svg role="img" aria-labelledby={titleId} viewBox="0 0 24 24">
      <title id={titleId}>{label}</title>
      <path d="…" />
    </svg>
  );
}

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

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

Определите роль иконки именно в этом месте интерфейса.
Если SVG внутри кнопки или ссылки, подпишите само действие.
Убедитесь, что каждая ссылка aria-labelledby ведёт к существующему уникальному ID.
Проверьте контраст и смысл иконки в реальном макете: автоматическая проверка разметки этого не решит.
Если иконка несёт важную информацию, проверьте управление клавиатурой и скринридером.

Бесплатно проверить SVG в браузере

Если нужен дополнительный разбор одного SVG, которым можно поделиться, запросите первичную проверку за $5 в USDC на Base. После оплаты отправьте SVG и хеш транзакции по почте; краткие замечания придут в течение одного рабочего дня. Не отправляйте приватный код. Это не санитайзер и не аудит соответствия требованиям.

Оплатить $5 USDC в сети Base Отправить заявку по почте

Источники

W3C WAI: советы по изображениям — подписи SVG и текстовые альтернативы.
W3C WAI: доступное имя SVG — примеры именованных SVG-изображений.
React: useId — создание ID для связей доступности.

Шпаргалка по alt-тексту для SVG · На главную SVG Ready