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

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

Alt-текст (атрибут alt) — текстовая альтернатива изображению. Screen reader зачитывает его вместо картинки. Поисковые системы используют для индексации. WCAG SC 1.1.1 требует alt для всех нетекстовых элементов.

Правила написания alt-текстов

Информативные изображения — описать содержание и функцию:

<!-- Плохо -->
<img src="photo.jpg" alt="фото">
<img src="chart.png" alt="chart">

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

Декоративные изображения — пустой alt, не отсутствующий:

<!-- Правильно — пустой alt, screen reader пропустит -->
<img src="bg-pattern.svg" alt="">

<!-- Неправильно — без alt screen reader зачитает имя файла -->
<img src="bg-pattern.svg">

Функциональные изображения (кнопки, ссылки) — описать действие:

<a href="/home">
    <img src="logo.svg" alt="На главную страницу">
</a>

<button>
    <img src="search-icon.svg" alt="Поиск">
</button>

Изображения с текстом — alt должен содержать этот текст:

<img src="sale-banner.jpg" alt="Скидки до 50% на все товары до 31 декабря">

Реализация в CMS

// Принудительное требование alt при загрузке изображений
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' => 'Укажите описание изображения для доступности',
        ];
    }
}

{{-- В WYSIWYG-редакторе показывать предупреждение об alt --}}
@if (!$image->alt_text)
    <div class="alert alert-warning" role="alert">
        Изображение без alt-текста — добавьте описание для доступности
    </div>
@endif

Компонент изображения в React

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

function Image({ src, alt, decorative = false }: ImageProps) {
    // Если декоративное — принудительно пустой alt и role="presentation"
    if (decorative) {
        return <img src={src} alt="" role="presentation" />;
    }

    return <img src={src} alt={alt} />;
}

// TypeScript не даст забыть alt
// <Image src="photo.jpg" /> — ошибка компилятора
// <Image src="photo.jpg" alt="Описание" /> — ок

Аудит изображений без alt

# Поиск изображений без alt в шаблонах
grep -rn '<img' resources/views/ | grep -v 'alt='

# axe-core в Playwright
test('all images have alt text', async ({ page }) => {
    await page.goto('/');
    const violations = await checkA11y(page, null, {
        runOnly: ['image-alt'],
    });
    expect(violations).toHaveLength(0);
});

Срок реализации

Аудит и добавление alt-текстов на существующий проект: 1–3 дня в зависимости от количества изображений. Настройка обязательного alt в CMS — полдня.