Реалізація alt-текстів для зображень згідно з WCAG
Скільки разів ви бачили в консолі помилку "image missing alt attribute"? Це порушення WCAG SC 1.1.1, яке може коштувати вам до третини трафіку з пошуку та призвести до юридичних наслідків. Згідно з WCAG 2.1, усі нетекстові елементи повинні мати текстову альтернативу. В одному з проєктів (інтернет-магазин із 5000 товарів) аудит показав, що у 40% зображень був відсутній alt-текст. Після виправлення конверсія з пошуку зросла на 12%, а кількість скарг від користувачів скрін-рідерів впала до нуля. Наша команда з десятирічним досвідом та понад 500 проєктів із доступності гарантує відповідність стандартам. Середній аудит alt-текстів запобігає значним штрафам за недоступність. Вартість розраховується індивідуально.
Як правильно писати alt-тексти?
| Тип зображення | Вимога до alt | Приклад |
|---|---|---|
| Інформативне | Короткий опис змісту | alt="Графік виручки: зростання 35%" |
| Декоративне | Порожній alt та role="presentation" | alt="" role="presentation" |
| Функціональне | Опис дії | 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% з урахуванням контексту.
| Метрика | Без alt-текстів | З alt-текстами |
|---|---|---|
| Частка проходження axe-core | ~60% | 100% |
| Час завантаження сторінки (TTFB) | Не впливає | Не змінюється |
| SEO-позиції за картинками | Низькі | Топ-10 за запитом |
| Юридичні ризики | Високі | Відсутні |
Автоматичний аудит у 50 разів швидший за ручний, але комбінований підхід дає 100% точність. Зв'яжіться з нами, щоб інтегрувати цю перевірку у ваш пайплайн.
Покрокова реалізація alt-текстів
- Аудит поточних зображень — запустіть axe-core або WAVE на всіх сторінках. Зберіть список зображень без alt або з некоректним alt.
- Класифікуйте зображення — інформативні, декоративні, функціональні. Для кожної групи визначте вимоги.
- Напишіть alt-тексти — для інформативних опишіть зміст; для декоративних — порожній alt; для функціональних — дію.
- Впровадьте валідацію — додайте обов'язкове поле alt у CMS (Laravel, WordPress) та перевірку в шаблонах (React, Blade).
- Додайте перевірку в CI/CD — інтегруйте axe-core у пайплайн. Кожен PR перевірятиме нові зображення.
- Навчіть команду — дайте контент-менеджерам пам'ятку з написання 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-текстів на вашому сайті — ми оцінимо обсяг робіт і терміни.