Що таке альтернативний текст (alt text)?

Альтернативний текст (alt text) - це текстовий опис зображення, який задається через атрибут alt всередині тега <img>. Він потрібен, щоб передати сенс картинки, якщо користувач не може її побачити, наприклад:

• людина з порушенням зору використовує скринридер;
• зображення не завантажилося;
• браузер блокує картинки;
• контент індексується пошуковими системами.

---

#Приклад

Якщо зображення не відобразиться, користувач (або скринридер) "побачить" фразу:

"Золотистий ретривер грає з м'ячем на лузі"

---

#Навіщо потрібен alt-текст

1. Для доступності (a11y) Скринридери читають alt і озвучують опис - незрячі користувачі розуміють, що зображено. Без alt вони просто почують:

"image1234.jpg" - що не несе сенсу.

2. Для SEO Пошуковики не "бачать" картинки, але читають alt. Це допомагає зрозуміти контент сторінки та індексувати зображення в пошуку за картинками.
3. Для резервного відображення Якщо зображення не завантажилося, alt підкаже користувачу, що там мало бути.
4. Для аналітики та контекстної реклами Деякі рекламні та аналітичні системи використовують alt-тексти, щоб зрозуміти, про що зображення, і підібрати релевантний контент.

---

#Як писати хороший alt-текст

Опиши сенс, а не просто вміст. Погано:

Добре:

Коротко, по суті (до ~125 символів). Не починай зі слів "Зображення" чи "Фото" - читач сам повідомляє, що це зображення. Якщо картинка декоративна (не несе сенсу), став порожній alt:

Тоді скринридер пропустить її.

---

#Приклад порівняння

---

#Висновок:

Альтернативний текст (alt text) - це опис сенсу зображення, доданий через атрибут alt. Він робить сайти:

• зрозумілими для скринридерів,
• індексованими для пошуковиків,
• зручними, навіть якщо картинка не завантажилася.

Хороший alt перетворює візуальний контент на зрозумілий текстовий досвід для всіх користувачів.