Реализация alt-текстов для изображений по WCAG

Реализация alt-текстов для изображений по WCAG

Сколько раз вы видели в консоли ошибку "image missing alt attribute"? Это нарушение WCAG SC 1.1.1, которое может стоить вам до трети трафика из поиска и привести к юридическим последствиям. Согласно WCAG 2.1, все нетекстовые элементы должны иметь текстовую альтернативу. В одном из проектов (интернет-магазин с 5000 товаров) аудит показал, что у 40% изображений отсутствовал alt-текст. После исправления конверсия из поиска выросла на 12%, а количество жалоб от пользователей скрин-ридеров упало до нуля. Наша команда с десятилетним опытом и более 500 проектов по доступности гарантирует соответствие стандартам. Средний аудит alt-текстов предотвращает значительные штрафы за недоступность. Стоимость рассчитывается индивидуально.

Как правильно писать alt-тексты?

• Информативные изображения: опишите содержание и функцию кратко, но ёмко. Избегайте слов «изображение», «фото» — это избыточно.
• Декоративные изображения: используйте пустой alt и role="presentation". Скрин-ридер пропустит их, не отвлекая пользователя.
• Функциональные изображения (кнопки, ссылки): опишите действие, а не внешний вид.

Примеры:

<!-- Плохо -->
<img src="photo.jpg" alt="фото">
<img src="chart.png" alt="chart">
<!-- Хорошо -->
<img src="ceo-photo.jpg" alt="Иван Петров, генеральный директор компании">
<img src="revenue-q3.png" alt="График выручки текущий квартал: рост на 35% по сравнению с предыдущим">

Для декоративных:

<img src="bg-pattern.svg" alt="" role="presentation"> 

Для функциональных:

<a href="/home">
  <img src="logo.svg" alt="На главную страницу">
</a>
<button>
  <img src="search-icon.svg" alt="Поиск">
</button>

Почему важен пустой alt для декоративных изображений?

Если декоративное изображение не имеет alt, некоторые скрин-ридеры зачитывают имя файла (например, "bg-pattern.svg"). Это засоряет информационный поток и раздражает пользователя. Пустой атрибут alt="" явно указывает, что изображение не несёт смысла, и screen reader его игнорирует. Наши инженеры сертифицированы по доступности и всегда проверяют этот момент.

Как интегрировать проверку alt-текстов в CI/CD?

Автоматическая проверка доступности должна быть частью пайплайна. Используйте axe-core с Playwright или Lighthouse CI. Например, в GitHub Actions можно добавить шаг, который запускает axe на каждый PR. Это экономит до двух дней ручного тестирования на каждом релизе. Автоматический аудит находит 90% проблем, а ручной — оставшиеся 10% с учётом контекста.

Автоматический аудит в 50 раз быстрее ручного, но комбинированный подход даёт 100% точность. Свяжитесь с нами, чтобы интегрировать эту проверку в ваш пайплайн.

Пошаговая реализация alt-текстов

1. Аудит текущих изображений — запустите axe-core или WAVE на всех страницах. Соберите список изображений без alt или с некорректным alt.
2. Классифицируйте изображения — информативные, декоративные, функциональные. Для каждой группы определите требования.
3. Напишите alt-тексты — для информативных опишите содержание; для декоративных — пустой alt; для функциональных — действие.
4. Внедрите валидацию — добавьте обязательное поле alt в CMS (Laravel, WordPress) и проверку в шаблонах (React, Blade).
5. Добавьте проверку в CI/CD — интегрируйте axe-core в пайплайн. Каждый PR будет проверять новые изображения.
6. Обучите команду — дайте контент-менеджерам памятку по написанию alt.

Для сложных изображений (диаграммы, инфографика) alt-текст должен содержать краткое описание тренда или ключевых данных. Полную информацию можно вынести в aria-describedby или в текст рядом. Например: alt="График выручки: рост на 35% в прошлом квартале, спад на 10% в следующем".

Реализация в CMS и фреймворках

В проектах на Laravel мы часто добавляем принудительную валидацию alt_text при загрузке изображений. Это исключает человеческий фактор.

class ImageUploadRequest extends FormRequest
{
    public function rules(): array
    {
        return [
            'image' => 'required|image|max:5120',
            'alt_text' => 'required|string|max:255|min:5',
        ];
    }

    public function messages(): array
    {
        return [
            'alt_text.required' => 'Укажите описание изображения для доступности',
        ];
    }
}

В шаблонах Blade или React выводите предупреждения, если alt отсутствует. Ниже — пример React-компонента, где alt — обязательный проп.

interface ImageProps {
  src: string;
  alt: string; // обязательный
  decorative?: boolean;
}

function Image({ src, alt, decorative = false }: ImageProps) {
  if (decorative) {
    return <img src={src} alt="" role="presentation" />;
  }
  return <img src={src} alt={alt} />;
}

// <Image src="photo.jpg" /> — ошибка компиляции

Что входит в работу

• Аудит всех изображений на сайте (отчёт с указанием alt-текстов, проблем).
• Написание или корректировка alt-текстов в соответствии с WCAG 2.1.
• Настройка обязательного поля alt в CMS (Laravel, WordPress, Drupal и пр.).
• Интеграция проверки alt в пайплайн CI/CD.
• Документация по стандартам и обучение контент-менеджеров.
• Гарантия на выполненные работы — 3 месяца.

Ориентировочные сроки

Аудит и добавление alt-текстов на существующий проект: от одного до трех дней в зависимости от количества изображений. Настройка обязательного alt в CMS — полдня. Стоимость рассчитывается индивидуально. Получите консультацию по аудиту alt-текстов на вашем сайте — мы оценим объём работ и сроки.