У магазині одне фото може показувати колір, фактуру та форму товару. Людина, яка користується скринрідером, має отримати важливу частину цієї інформації з тексту. ШІ може запропонувати alt-текст, але лише людина, яка знає товар і роль зображення на сторінці, вирішує, що саме має бути в описі.
Нижче — робочий процес для невеликого інтернет-магазину. Він спирається на настанови W3C Web Accessibility Initiative (WAI) і є редакційною інструкцією, а не доказом доступності будь-якого сайту.
1. Спочатку визначте призначення фотографії
У дереві рішень W3C ключове питання — чи додає зображення зміст, чи дублює сусідній текст, чи керує дією.
| Зображення на сторінці | Що робити з alt |
|---|---|
| Основне фото товару з важливими візуальними ознаками | Коротко передати ці ознаки в контексті товару |
| Друга фотографія, що показує нову деталь | Назвати саме нову деталь: застібку, візерунок, вигляд ззаду |
| Декоративне HTML-зображення без нової інформації | Використати порожній атрибут alt="" |
| Іконка-кнопка без достатнього текстового підпису | Передати дію кнопки, а не зовнішній вигляд іконки |
| Складна інфографіка чи таблиця розмірів у зображенні | Надати інформацію ще й у доступному текстовому або табличному вигляді |
W3C пояснює, що суто декоративні HTML-зображення потребують порожнього alt, а не відсутнього атрибута: інакше деякі скринрідери можуть озвучувати назву файла. Для функціональних зображень важлива дія, наприклад «Пошук», а не «лупа». Ці правила залежать від контексту використання, тому універсальний підпис для кожного файла не працює.
2. Підготуйте правдиве джерело про товар
Перед генерацією зберіть артикул, перевірену назву, актуальний колір варіанта, матеріал лише якщо підтверджений, а також призначення кожного фото на сторінці. Не виводьте склад, розмір, сертифікацію або властивості за зовнішнім виглядом упаковки, якщо текст нерозбірливий чи опис товару цього не підтверджує.
Для прикладу візьмімо вигаданий товар: темно-синю сумку через плече з металевою застібкою, яку справді видно на фото. Можливі alt-тексти:
- Основне фото: «Темно-синя сумка через плече з металевою застібкою, вигляд спереду».
- Фото ззаду: «Задня частина темно-синьої сумки з зовнішньою кишенею» — тільки якщо кишеня насправді є.
- Декоративний візерунок поряд із карткою, що не додає змісту:
alt="".
«Найкраща екошкіра, преміум-якість, 100% натуральний матеріал» — невдалий alt: рекламні твердження не випливають із фото. Якщо матеріал має значення для покупки, його потрібно перевірити за специфікацією й відобразити також у звичайному тексті картки.
3. Дайте ШІ короткий контекстний запит
Підготуй український alt-текст до кожного зображення товару. Вхідні дані: фото, перевірений опис товару, роль фото на сторінці, його варіант кольору. Опиши лише візуальну інформацію, потрібну для розуміння або вибору товару і не дубльовану сусіднім текстом. Не вигадуй матеріал, склад, властивості, бренд чи розміри. Для декоративного фото запропонуй порожній alt і поясни чому. Для кнопки назви дію. Якщо напис нерозбірливий, познач «перевірити вручну». Поверни таблицю: файл, роль, пропозиція alt, сумнівні деталі. Не змінюй опубліковані картки.
Це шаблон запиту, а не опис готової функції певного продукту. Якщо модель має бачити зображення, переконайтеся, що використаний сервіс справді підтримує їх аналіз і що вам дозволено передавати відповідні файли.
4. Перевірте кожний клас помилок
Порівняйте alt із реальним фото й текстом поруч. Небезпечні не лише фантазії моделі, а й правдоподібні дрібниці: не той колір варіанта, вигадана блискавка, пропущена важлива деталь, надто довга характеристика або однакові підписи для різних ракурсів. Якщо на зображенні є єдиний видимий напис, що має значення, потрібно передати його зміст; правила для зображень із текстом не дозволяють просто його ігнорувати.
Перевірте також технічне впровадження. Alt — це атрибут HTML-зображення, а не підпис у таблиці, який забули опублікувати. На сторінці товару перевірте основне фото, галерею, мініатюри, кнопку зміни зображення та мобільну версію. Особливо важливо, чи не озвучується двічі те саме: назва товару поруч може вже містити частину потрібної інформації.
Не перетворюйте alt на набір пошукових ключових слів. Його перша мета — пояснити інформацію або функцію зображення. Наявність alt сама по собі не гарантує відповідності всім критеріям WCAG, покращення позицій у пошуку чи зростання продажів.
5. Почніть із малого пілоту
Оберіть 10 товарів із різними типами фотографій: один одяг із варіантами кольору, один товар із дрібними деталями, один з написами на упаковці, один із таблицею розмірів та кілька простих предметів. Додайте хоча б одну декоративну іконку й одну функціональну кнопку — щоб команда не плутала їх із товарними фото.
Для кожного збережіть початковий alt, запропонований ШІ, фінальну версію і причину правки. Перевіряйте не лише грамотність, а точність відносно фотографії, узгодженість із карткою, доречну довжину й правильний вибір порожнього alt. Коли можливо, попросіть людину, яка використовує скринрідер, пройти реальну картку товару; автоматичні перевірки не замінюють такого тестування.
Наступний крок: відкрийте одну картку з п’ятьма фотографіями та запитайте для кожної: «Яку нову інформацію дає саме це зображення?» Лише після відповіді на це питання доручайте ШІ чернетку alt-тексту.
Ці рекомендації щодо alt стосуються HTML-елемента img. Фонові зображення CSS не мають атрибута alt; важливу інформацію не слід подавати лише таким фоном.
