AI-генерація Alt-текстів: як це працює

Останнє оновлення: 06.04.2026

Alt-текст (альтернативний текст) — це текстовий опис зображення, який зчитується скрінридерами для користувачів з порушеннями зору. Він також відображається замість зображення, коли воно не завантажується, і індексується пошуковими системами. Відповідно до критерію WCAG 1.1.1 «Нетекстовий контент», усі значущі зображення на сайті повинні мати змістовний альтернативний текст — це один із базових критеріїв рівня A, тобто мінімальний поріг доступності.

Незважаючи на простоту вимоги, відсутні або неякісні alt-тексти залишаються однією з найпоширеніших проблем доступності в мережі. За даними WebAIM Million 2026, відсутність alt-тексту для зображень — це помилка номер один, що зустрічається на мільйонах сайтів. Саме тут штучний інтелект пропонує масштабоване рішення: автоматична генерація alt-текстів за допомогою комп'ютерного зору та великих мовних моделей.

Як AI генерує alt-text: технічний процес зсередини

Сучасна AI-генерація alt-текстів — це поєднання кількох технологій, що працюють у ланцюжку. Розглянемо кожен крок детально.

Крок 1: Комп'ютерний зір (Computer Vision)

На першому етапі зображення обробляється моделлю комп'ютерного зору — найчастіше це трансформер-архітектура типу ViT (Vision Transformer) або CLIP (Contrastive Language-Image Pretraining). Модель «бачить» зображення як набір патчів (фрагментів), аналізує їхні взаємозв'язки і формує векторне представлення (embedding) того, що зображено: об'єкти, дії, сцени, кольори, просторові відносини між елементами.

Крок 2: Генерація опису

Векторне представлення зображення передається до мовної моделі (LLM), яка генерує текстовий опис на основі «розуміння» візуального контенту. Сучасні мультимодальні моделі (GPT-4o, Claude 3, Gemini Vision) поєднують обидва кроки в єдиному процесі: вони одночасно «бачать» і «описують» зображення, генеруючи природну мову. Результат — опис, що передає ключові елементи зображення у вигляді пов'язаного тексту.

Крок 3: Контекстна адаптація (Context-Aware)

Найважливіший крок для якісного alt-тексту — це контекстна адаптація. Хороший alt-текст залежить не тільки від того, що зображено, але й від контексту сторінки. Зображення фотографа у портфоліо вимагає іншого опису, ніж та сама фотографія в новинній статті. AI-система аналізує:

• Текст навколо зображення (заголовки, абзаци, підписи)
• URL і назву файлу зображення (часто містять корисні ключові слова)
• Тип сторінки і тематику сайту
• Мову сайту для генерації alt-тексту тією ж мовою

Контекстна адаптація — це те, що відрізняє якісний AI-генератор alt-текстів від простого «описувача зображень». Хороший alt-текст передає функцію або інформаційну цінність зображення, а не просто переліковує об'єкти на ньому.

AI alt-text проти ручного написання: чесне порівняння

Щоб зрозуміти, коли AI достатньо, а коли потрібна людина, розглянемо ключові відмінності за критеріями, що мають значення на практиці.

Коли AI достатньо, а коли потрібен людський review

Оптимальна стратегія — це гібридний підхід: AI обробляє масові завдання, а людина переглядає складні або критично важливі випадки. Ось як розподілити відповідальність на практиці.

Декоративні зображення

Декоративні зображення (фонові текстури, декоративні лінії, абстрактні елементи дизайну) не несуть інформаційної цінності. Для них потрібен порожній alt-атрибут (alt=""), що сигналізує скрінридеру пропустити зображення. AI добре впорується з ідентифікацією декоративних зображень — вони зазвичай не мають чіткого фокусного об'єкта і оточені мінімальним текстовим контекстом. Людський review тут зазвичай не потрібен.

Складні інфографіки та діаграми

Інфографіки, діаграми, графіки з даними, технічні схеми — це саме той випадок, де AI недостатньо. Користувач скрінридера потребує не просто «опис того, що видно», а передачі інформаційного змісту: ключових цифр, тенденцій, висновків. Для складних інфографік WCAG рекомендує надавати довгий опис у тексті сторінки або у вигляді таблиці. AI може сформувати базовий alt-текст, але людина повинна перевірити і доповнити його, особливо якщо інфографіка містить числові дані або складні залежності.

Продуктові фотографії

Продуктові фото — ідеальний кандидат для AI-генерації. Вони стандартні за структурою (об'єкт на фоні), їх часто сотні або тисячі, і AI стабільно генерує якісні описи: колір, матеріал, форма, ключові деталі товару. Для стандартних продуктових фото людський review потрібен лише вибірково — приблизно 5-10% для контролю якості. Виняток — продукти для медицини або безпеки, де точність alt-тексту є критичною.

Як це працює в InclusiveWeb

Головна відмінність від звичайного сканера в тому, де саме знаходяться зображення. Сайти скануються за шаблонами сторінок — вибіркою URL, — тож картки товарів, результати пошуку й сторінки за фільтром у таку вибірку зазвичай не потрапляють. Тому виявлення працює не тільки на боці сканера.

1. 1Виявлення в браузері живого відвідувача. Коли автофікс активний, на сторінку довантажується маленький скрипт, який бачить зображення на сторінці, відкритій реальним користувачем, і доповідає їх бекенду. Так у роботу потрапляють і ті сторінки, до яких сканер по шаблонах ніколи б не дійшов.
2. 2Контекст сторінки, а не сама картинка. Разом із зображенням модель отримує заголовок розділу, сусідній текст, підпис, посилання, у якому стоїть зображення, його позицію на сторінці, ознаку товару, заголовок сторінки й мову. Саме тому опис пояснює роль зображення тут, а не перелічує, що на ньому намальовано.
3. 3Генерація. Vision-модель повертає одну коротку фразу до 100 символів мовою сторінки. Інструкція написана під WCAG, а не під красивий опис: передати суть і призначення, не починати зі слів «зображення» чи «фото», для іконки назвати її функцію, для людини — дію або роль, не переказувати сусідній заголовок.
4. 4Застосування й перегляд. Зображення, знайдені в браузері відвідувача, застосовуються одразу — у кабінеті вони позначені як автоматично проставлені, і перегляд для них необов’язковий. Зображення, знайдені аудитом, навпаки чекають вашого підтвердження. Готовий опис віддається наступним відвідувачам тим самим скриптом, що й решта виправлень.

Скільки генерацій входить

Кредити залежать від розміру сайту в тарифі — Аудиту, Панелі чи автофікса, лічильник один на підписку: 100 для сайтів до 50 сторінок, 500 до 500, 1 000 до 5 000, 3 000 до 50 000 і 4 000 далі. Це тотал на весь період підписки (на річному плані — на рік), а не місячна квота: більшість зображень на сайті описуються один раз і далі не змінюються. Один кредит — одна генерація; перегенерація теж списує кредит, ручне редагування — ні.

Коли кредити закінчуються, генерація зупиняється, а записи переходять у ручний ввід — дописати опис самому в кабінеті можна безкоштовно й без обмежень. Щойно кредити оновлюються, AI повертається до цих зображень. Відредагований вручну текст AI більше не чіпає: генерація бере тільки ті записи, до яких ще не торкалися, а ваша версія завжди має пріоритет над згенерованою.

Приклади: до та після AI-генерації alt-тексту

Погляньмо на конкретні приклади того, як виглядає HTML до і після застосування AI-генерації alt-тексту через InclusiveWeb Autofix.

<!-- Продуктове фото без alt-тексту -->
<img src="/images/ceramic-mug-blue.jpg"
     class="product-image" />

<!-- Зображення у статті без опису -->
<figure>
  <img src="/uploads/2024/infographic-wcag.png" />
  <figcaption>Статистика WCAG 2024</figcaption>
</figure>

<!-- Банер зі CTA, alt відсутній -->
<a href="/sale">
  <img src="/banners/spring-sale-50.jpg" />
</a>

<!-- Продуктове фото: AI описав товар -->
<img src="/images/ceramic-mug-blue.jpg"
     class="product-image"
     alt="Синя керамічна кружка об'ємом 350 мл
          з матовим покриттям та округлою ручкою" />

<!-- Стаття: AI врахував figcaption як контекст -->
<figure>
  <img src="/uploads/2024/infographic-wcag.png"
       alt="Інфографіка: 95.9% сайтів мають помилки
            WCAG. Топ-5 помилок: відсутній alt-текст
            (58%), низький контраст (83%), відсутні
            мітки форм (54%), порожні посилання (45%),
            відсутні заголовки документа (40%)" />
  <figcaption>Статистика WCAG 2024</figcaption>
</figure>

<!-- Банер: AI описав акцію та CTA -->
<a href="/sale">
  <img src="/banners/spring-sale-50.jpg"
       alt="Весняний розпродаж — знижки до 50%
            на весь асортимент. Перейти до акції" />
</a>

Зверніть увагу: для інфографіки AI генерує детальний alt-текст, що передає числові дані. Для банера з посиланням — описує і зміст, і призначення (CTA). Для продуктового фото — передає ключові характеристики товару. Це і є контекстна адаптація в дії.