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

Реалізація alt-текстів для зображень (WCAG)

Alt-текст (атрибут alt) — текстова альтернатива зображенню. Екранна читалка озвучує його замість картинки. Пошукові системи використовують його для індексації. WCAG SC 1.1.1 вимагає alt для всіх нетекстових елементів.

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

Інформаційні зображення — описати вміст та функцію:

<!-- Погано -->
<img src="photo.jpg" alt="фото">
<img src="chart.png" alt="чарт">

<!-- Добре -->
<img src="ceo-photo.jpg" alt="Іван Петров, генеральний директор компанії">
<img src="revenue-q3.png" alt="Діаграма виручки Q3 2024: ріст на 35% порівняно з Q2">

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

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

<!-- Неправильно — без alt екранна читалка озвучує ім'я файлу -->
<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' => 'Укажіть описання зображення для доступності',
        ];
    }
}

{{-- Показувати попередження про відсутність alt у редакторі WYSIWYG --}}
@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="Описання" /> — ok

Аудит зображень без 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 — напівдня.