Як писати добрий альтернативний текст для зображень

Для чого потрібен альтернативний текст

Альтернативний текст – це текстова альтернатива зображення, записана в атрибуті alt. Програми зчитування з екрана читають її вголос, брайлівські дисплеї показують її, а браузер показує її, коли зображення не завантажується. Пошукові системи теж можуть її використовувати. Вебстандарт доступності WCAG вимагає текстової альтернативи, що виконує ту саму функцію, що й зображення (критерій успіху 1.1.1, рівень A).

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

Чотири види зображень

• Інформативні зображення додають зміст: фото, значок поруч із номером телефону, діаграма. Напиши короткий альтернативний текст, що передає цей зміст.
• Функціональні зображення стоять усередині посилань і кнопок. Альтернативний текст називає дію чи ціль, а не зображення: «Пошук» для лупи, «Надрукувати цю сторінку» для значка принтера.
• Декоративні зображення нічого не додають: рамка, розділювач, орнамент або зображення, що лише повторює текст поруч. Дай їм порожній атрибут alt (alt=""), щоб програми зчитування з екрана їх пропускали, або винеси їх у таблицю стилів як тло.
• Зображення тексту – останній засіб. Якщо воно тобі потрібне, альтернативний текст повторює слова на зображенні. Логотип, що не є посиланням, отримує назву організації.

Як написати добрий альтернативний текст

1. 1Запитай себе, навіщо зображення на сторінці. Чого б бракувало відвідувачеві, якби його не було?
2. 2Напиши те, що важливо для цієї мети, – фразою чи одним реченням.
3. 3Почни зі змісту. Програма зчитування з екрана зазвичай оголошує, що це зображення, тож «зображення …» чи «фото …» рідко допомагає.
4. 4Не повторюй того, що вже каже текст поруч із зображенням. Якщо він каже все, зображення декоративне й отримує порожній alt.
5. 5Прочитай альтернативний текст уголос, не дивлячись на сторінку. Чи має він сенс сам по собі?

Типові помилки

• Атрибута alt немає взагалі. Деякі програми зчитування з екрана тоді читають ім’я файлу.
• Ім’я файлу чи код як альтернативний текст, як-от «IMG_2041.jpg».
• Той самий набір ключових слів на багатьох зображеннях. Альтернативний текст – насамперед для людей.
• Довгий опис суто декоративного зображення.
• Опис вигляду зображення-кнопки замість її дії. Кнопка пошуку – це не «лупа», а «Пошук».

Якої довжини він має бути?

WCAG 1.1.1 не називає кількості символів. Порада W3C – писати коротко, найкраще фразою чи реченням. Для діаграм та інших складних зображень наведи повну інформацію текстом на сторінці, а альтернативний текст залиш коротким. Якщо тобі потрібно більше за речення, імовірно, зображення несе вміст, якому місце в тексті сторінки.

Перевір свій сайт

Щоб знайти зображення без корисного альтернативного тексту, запусти на сторінці безкоштовну перевірку альтернативних текстів. Щоб отримати пропозиції для багатьох зображень, скористайся інструментом «Генератор альтернативного тексту». Автоматична пропозиція може пропустити те, що важливо на твоїй сторінці, тож прочитай кожен текст і зміни його, якщо він не відповідає меті зображення.

Інструменти Do4U допомагають із набором тексту, а не з рішенням: чи зображення інформативне, функціональне чи декоративне, найкраще знаєш ти. Перевіряй знову після великих змін на сайті.