Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке альтернативний текст (alt text)?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Alt text** - це текстовий опис зображення, заданий через атрибут `alt` тега `<img>`, який передає сенс картинки, якщо користувач не може її побачити. **Ключове:** він робить сайт доступним для скринридерів, індексованим для пошуковиків і зрозумілим навіть тоді, коли зображення не завантажилося.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**Альтернативний текст (alt text)** - це текстовий опис зображення, який задається через атрибут `alt` всередині тега `<img>`. Він потрібен, щоб **передати сенс картинки**, якщо користувач **не може її побачити**, наприклад: - людина з порушенням зору використовує скринридер; - зображення не завантажилося; - браузер блокує картинки; - контент індексується пошуковими системами. --- ### Приклад ```html <img src="dog.jpg" alt="Золотистий ретривер грає з м'ячем на лузі"> ``` Якщо зображення не відобразиться, користувач (або скринридер) "побачить" фразу: > "Золотистий ретривер грає з м'ячем на лузі" --- ### Навіщо потрібен alt-текст 1. **Для доступності (a11y)** Скринридери *читають* `alt` і озвучують опис - незрячі користувачі розуміють, що зображено. Без `alt` вони просто почують: > "image1234.jpg" - що не несе сенсу. 2. **Для SEO** Пошуковики не "бачать" картинки, але читають `alt`. Це допомагає зрозуміти контент сторінки та індексувати зображення в пошуку за картинками. 3. **Для резервного відображення** Якщо зображення не завантажилося, `alt` підкаже користувачу, що там мало бути. 4. **Для аналітики та контекстної реклами** Деякі рекламні та аналітичні системи використовують alt-тексти, щоб зрозуміти, про що зображення, і підібрати релевантний контент. --- ### Як писати хороший alt-текст **Опиши сенс, а не просто вміст.** Погано: ```html <img src="graph.png" alt="Графік"> ``` Добре: ```html <img src="graph.png" alt="Зростання продажів за 2024 рік на 25%"> ``` **Коротко, по суті (до ~125 символів).** **Не починай зі слів "Зображення" чи "Фото"** - читач сам повідомляє, що це зображення. **Якщо картинка декоративна** (не несе сенсу), став порожній alt: ```html <img src="decor-line.png" alt=""> ``` Тоді скринридер пропустить її. --- ### Приклад порівняння | Картинка | alt-текст | Результат | |---|---|---| |  | `alt="Логотип компанії Apple"` | Скринридер озвучить "Логотип компанії Apple" | |  | `alt=""` | Скринридер пропустить декоративне зображення | |  | *alt відсутній* | Скринридер озвучить ім'я файлу - "logo.png" | --- ### Висновок: **Альтернативний текст (alt text)** - це **опис сенсу зображення**, доданий через атрибут `alt`. Він робить сайти: - зрозумілими для скринридерів, - індексованими для пошуковиків, - зручними, навіть якщо картинка не завантажилася. Хороший `alt` перетворює візуальний контент на **зрозумілий текстовий досвід для всіх користувачів**.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.