"Назву якого файлу ви хочете, щоб програма зчитування з екрана читала вам на вухо 40 разів на день?" Це трохи абсурдне запитання, але це саме те, що відбувається, коли значуще зображення залишається з alt="image1.jpg" або, що ще гірше, взагалі не містить альтернативного тексту. Ця стаття є практичним посібником із написання альтернативного тексту, який справді допомагає — не просто презентує, а добре .
Коротко — що охоплює цей посібник
Чому поганий альтернативний текст майже такий самий поганий, як відсутність альтернативного тексту
Згідно з WCAG 1.1.1, увесь нетекстовий вміст повинен мати альтернативний текст, але формальна вимога — це лише половина справи. «image1.jpg», «image» або «logo» технічно відповідають вимогам (є атрибут alt), але вони не передають реальної інформації. Користувач програми зчитування з екрана, який чує рядок "image... image... image23.png", розчарований не менше, ніж зрячий користувач, який дивиться на серію порожніх кадрів.
Як написати хороший альтернативний текст
Керівне правило: описуйте повідомлення зображення в контексті, у якому воно з’являється, а не дослівний опис того, що ви бачите. Фотографію людей за столом під час зустрічі команди, яка супроводжує статтю про співпрацю, можна назвати «Команда, яка працює разом за столом», а не «Фото людей». Для діаграми або графіка опишіть висновок, представлений на діаграмі: «Гістограма, яка показує 40% зростання продажів у третьому кварталі» є значно кращою, ніж «Гістограма».
- Коротко та змістовно — зазвичай достатньо 1–2 речень; немає потреби описувати кожну візуальну деталь.
- Пропустіть «image of» або «picture of» — програма зчитування з екрана вже повідомляє, що це зображення, тому немає потреби повторювати це.
- Зверніть увагу на навколишній текст — те саме зображення може отримувати різний альтернативний текст у різних контекстах.
Коли навмисно залишати альтернативний текст порожнім
Не кожне зображення потребує опису. Суто декоративні зображення — графічні розділові лінії, фонові ілюстрації, піктограми, які просто повторюють текст поруч — найкраще позначати тегамиalt=""(порожній альтернативний текст, не пропущено), тому програма зчитування з екрана їх повністю пропускає. Різниця між «відсутнім» і «навмисно порожнім» є критичною: відсутність звучить як помилка або зчитує назву файлу; навмисно порожній просто мовчки пропускає його.
💡 Практична порада
Швидкий тест: якби ви повністю видалили зображення зі сторінки, чи користувач, який його не бачить, щось втратив би? Якщо ні — ймовірно, він декоративний і підходить для порожнього альт.
Що робити зі складними графіками та діаграмами
Для складної діаграми даних, ілюстрованої порівняльної таблиці чи інфографіки з кількома рівнями інформації недостатньо короткого альтернативного тексту — занадто багато інформації для передачі. Рішення: короткий альтернативний текст, який описує загальну тему, поряд (у звичайному тексті навколо зображення, а не лише в атрибуті alt) більш детальний опис важливих даних або еквівалентна таблиця даних, за якою може переміщатися програма зчитування з екрана.
Не впевнені, який альтернативний текст відсутній або проблематичний на вашому сайті?
Наш інструмент знаходить зображення без альтернативного тексту в кожному документі на вашому сайті та позначає їх за пріоритетністю.
Зробіть свої документи доступними безкоштовно ←