Останнім часом для України як ніколи раніше стали актуальними теми, пов’язані з доступністю (безбар’єрністю). І йдеться не лише про доступність будівель чи транспорту, але й сайтів та інформації в соцмережах. Інтернет став невід’ємною частиною життя багатьох людей, зокрема — незрячих, тому дуже важливо, щоб сайти, а також інформація, яка на них опублікована, були доступними не лише для зрячих, але й для незрячих людей.
Одним з основних елементів доступності сайтів є описані зображення. У цій статті ми розповімо, як зробити зображення доступними для незрячих і пояснимо, як краще їх описувати, щоб це не нашкодило дизайну вашого сайту. Також розповімо про те, як подавати інформацію в доступному вигляді, якщо ви подаєте її на зображеннях (наприклад, на інфографіці).
Які зображення обов’язково повинні мати альтернативний текст
Якщо ви вирішили, що прямуєте до доступності й почнете з зображень, то запам’ятайте, яким зображенням потрібно надавати альтернативні тексти. Альтернативні тексти повинні мати:
- титульні зображення до публікацій;
- зображення, вставлені в текст публікацій;
- зображення для посилань (наприклад, на соцмережі вашого сайту);
- зображення до посилань на сайти партнерів, донорів і так далі.
Непотрібно підписувати зображення, які не становлять ніякого інтересу для незрячих користувачів, а використовуються лише як елементи дизайну. Однак такі зображення все одно мають бути з атрибутом alt, але цей атрибут має бути порожнім (alt=””).
Як описати зображення для незрячих користувачів, щоб описи не впливали на дизайн
Якщо ви хочете, щоб незрячі відвідувачі вашого сайту знали, що показано на зображеннях, які ви публікуєте, але боїтеся, що довгі описи впливатимуть на дизайн вашого сайту та погіршуватимуть його, то скористайтеся для опису альтернативним текстом, відомим ще як alt-текст або alt. Текст, вказаний в атрибуті alt, видимий лише для незрячих користувачів та пошукових систем. Інші користувачі його не побачать.
В альтернативному тексті ви можете максимально розгорнуто описати зображення. Цей текст ви маєте написати самостійно. Намагайтеся описати зображення так, ніби ви розповідаєте комусь про те, що на ньому зображено. Спробуйте писати описи зрозуміло, але й лаконічно водночас.
Якщо це скриншот чи фото якогось тексту (книжкової сторінки, рекламної афіші тощо) — продублюйте написане на фото в альтернативному тексті, щоб дати незрячим читачам повну інформацію про зображення.
Ви також можете описувати зображення, які публікуєте у соцмережах (зокрема Twitter, Facebook та Instagram). Щоб це зробити, скористайтеся відповідними інструментами. Дізнайтеся:
- як додати альтернативний текст до зображень у Facebook;
- як додати альтернативний текст до зображень у Instagram;
- як додати альтернативний текст до зображень у Twitter (X).
Як і у випадку з сайтами, те, що ви напишете в полі для альтернативного тексту в соцмережах, буде видимим лише для незрячих користувачів і для пошукових систем. Загалом, описуючи зображення, ви робите одразу дві корисні справи: стаєте доступнішими для незрячих і для пошукових систем. Погодьтеся, це подвійна вигода!
Як описати зображення для всіх, а не лише для незрячих
Якщо ви хочете описати зображення для всіх користувачів, а не лише для незрячих, ви можете це зробити за допомогою підпису до зображення. Сучасні адмінки містять для цього відповідні поля, тому проблем з цим у вас не буде, та й дизайну ви також не нашкодите. Описи зображень важливі не лише для незрячих, але й для всіх. Наприклад, коли ви публікуєте матеріал з великою кількістю фотографій, то маєте розуміти, що серед ваших читачів є ті, хто може не розуміти, що саме зображено на тому чи іншому фото. Це також корисно, коли ви пишете матеріал про якусь зустріч, де присутні не надто відомі люди — описати їх у підписі до зображення буде важливим елементом максимально повного розуміння вашого матеріалу.
Приклади хороших і поганих підписів до зображень
Щоб дати вам можливість зрозуміти, як краще підписувати зображення, проілюструємо все вищеописане прикладами.
Хороші приклади
Усі дописи канадського уряду в X мають альтернативні тексти, де описано, що саме зображено на фото. Наприклад, зображення до цього допису має такий альтернативний текст (наводимо в перекладі): «Ескіз традиційної української вишиванки. Текст: День вишиванки». Також альтернативні тексти присутні в дописах прем’єр-міністра Канади Джастіна Трюдо та на сторінці канадського парламенту у Facebook.
Польська поліція також надає вичерпний опис до своїх фотографій (наприклад, тут).
Агенція новин Reuters максимально детально описує фотографії до своїх новин. Іноді alt-тексти не такі розлогі, як підписи, однак незалежно від цього такі описи все одно доступні незрячим користувачам.
Українське видання «Ґрунт» дуже добре описує фотографії, вставлені в тексти, однак порушує доступність в частині опису титульних фотографій. Найкращі приклади, на які варто рівнятися, можна зустріти, зокрема, тут і тут.
Гарно описані фотографії в низці текстів української служби BBC, наприклад тут, однак ці описи можуть бути ще детальнішими. Більше деталізації можна додавати якраз в alt-текстах.
Погані приклади
Зображення до новин на сайтах українського уряду, поліції чи Офісу президента мають такі самі альтернативні тексти, як і заголовки публікацій, яких вони стосуються. Це найпоширеніша проблема, коли формально альтернативний текст є, але фактично він не надає незрячим користувачам жодної нової інформації. Таких прикладів можна наводити дуже і дуже багато як у приватному, так і в державному секторах.
Дописи на сторінках органів державної влади, місцевого самоврядування, медіа та лідерів громадської думки у соцмережах не мають альтернативних текстів до зображень.
Що робити з інфографікою та поданням інформації лише у вигляді зображень
Ще одна проблема з непідписаними зображеннями стосується подачі інформації у вигляді зображень. Зазвичай це або інфографіка, або, наприклад, графіки відключення світла від деяких обленерго.
Зображення — це зручно, але не доступно. Щоб не припускатися такої помилки, можна піти за прикладом аналітичної платформи «Опендатабот»: у їхніх публікаціях є відразу три варіанти подання інформації — зображення, діаграма в текстовому вигляді й таблиця на сайті (приклад — тут).
Якщо вам замало цих порад і ви хочете більше консультацій, або ж хочете, щоб ваш сайт став доступним для всіх — звертайтеся до нас, ми знаємо, як вам допомогти.
Про автора
Володимир Пиріг — тестувальник вебдоступності в Access Lab. Перекладач програм для незрячих і сертифікований експерт NVDA. Журналіст, який втомився від новин і шукає нових пригод.