Стандарт WCAG для тестувальників: 1.1. Text Alternatives

Підписуйтеся на Telegram-канал «DOU #tech», щоб не пропустити нові технічні статті

Привіт. На зв’язку Женя Поляков, QA Manager в Astound Commerce, і я продовжую серію статей про доступність. Попередні дві були про WCAG-стандарт і тестування доступності загалом та інструменти щодо accessibility testing. Цього разу я пропоную розглянути першу настанову WCAG стандарту «Guideline 1.1 — Text Alternatives», а саме єдиний пункт цієї настанови — «1.1.1 Non-text Content». На перший погляд він здається дуже простим, але у ньому є багато різноманітних ситуацій з різними рішеннями, які й стали основою для написання цієї статті.

Якщо вважаєте, що у тексті є неточності, поділіться своїми думками в коментарях. Це допоможе і мені, і тим нашим колегам, хто займається таким видом тестування.

Загальна інформація про настанову

Про що ж каже настанова «Guideline 1.1 — Text Alternatives»?

«Весь контент, який не є текстом і представлений користувачу, має «текстову альтернативу», що має рівнозначне призначення за винятком ситуацій нижче:

• Controls, input (елементи керування, введення) — якщо не текстовий контент є елементом керування сторінкою або приймає введення від користувача, тоді такі елементи повинні мати так зване доступне ім’я, яке описує призначення цього елементу. Ці елементи розглядають у пункті «4.1.2 Name, Role, Value»;
• Time-Based Media (медіа, яке має часові елементи — відео, аудіо тощо) — якщо не текстовий контент є таким типом медіа, тоді текстова альтернатива повинна хоча б забезпечити опис не текстового контенту. Про це детальніше розписано у настанові «1.2 Time-based media»;
• Test — якщо не текстовий контент є тестом або вправою, яка перестане бути дійсною при представленні у форматі тексту, тоді текстова альтернатива повинна хоча б забезпечити опис не текстового контенту;
• Sensory — якщо не текстовий контент призначений для створення специфічного чуттєвого досвіду (наприклад, гра на флейті), тоді текстова альтернатива повинна хоча б забезпечити опис не текстового контенту;
• CAPTCHA — якщо мета не текстового контенту перевірити, чи людина або комп’ютер має намір отримати доступ до контенту, тоді такий контент забезпечується текстовою альтернативою, яка визначає та описує мету такого контенту. Також альтернативні форми CAPTCHA, які використовують різні форми чуттєвого сприйняття, повинні бути надані для того, щоб користувачі з різними формами фізичних порушень могли пройти цю перевірку;
• Decoration, Formatting, Invisible — якщо не текстовий контент є чистою декорацією (має тільки естетичне призначення, не несе контенту та не має закріпленої функціональності), використовується тільки для візуального форматування (наприклад, роздільники) або є невидимим для користувача, то такі елементи повинні бути зроблені так, щоб допоміжні технології (наприклад, скрінрідери) ігнорували їх.

Тепер поговоримо про те, що ж таке «текстова альтернатива». W3C дає такий опис: «Текст, який пов’язаний з не текстовим контентом програмно або посилається на текст, який програмно пов’язаний з таким контентом. Програмно пов’язаний текст, своєю чергою, — це текст, розташування якого можна програмно визначити із не текстового контенту».

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

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

«Програмно пов’язаний з не текстовим контентом» в цьому контексті означає, що користувач може використовувати допоміжні технології для того, щоб знайти текстову альтернативу (яку він/вона може використовувати), коли потрапляє на не текстовий контент (який він/вона не може використовувати).

Розібрались з визначеннями. Тепер перейдемо до прикладів текстових альтернатив.

Атрибут alt

Alt — це атрибут, який найчастіше використовують для текстової альтернативи. Він визначений для тегів img, area та опціонально для input (можна використовувати тільки з type="image"). Цей атрибут призначений для того, щоб користувач міг зрозуміти ці елементи, якщо він не має змогу їх побачити. Якщо картинка не завантажилась, то текст цього атрибута буде відображатись користувачу. Так само і скрінрідери мають змогу читати цей атрибут для своїх користувачів.

Типовий приклад використання alt ви можете переглянути нижче:

Рис. 1. Приклад використання alt атрибута

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

Основний принцип для текстової альтернативи в цьому контексті — вона повинна представляти зміст та функцію зображень на сторінці.

Є два потенційних варіанти, як це зробити:

• використовуючи alt в img тегу;
• використовуючи контекст або оточення самого зображення.

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

Йдемо далі. Кожне зображення повинно мати alt-атрибут. Це обов’язковий атрибут і вимоги HTML-стандарту. Зображення без цього атрибута, найімовірніше, не будуть доступні. В деяких кейсах alt може бути порожнім (наприклад, alt=«"), але він завжди має бути присутнім.

Як же зрозуміти, що повинно бути в alt-атрибуті? Розгляньмо далі.

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

Подивімося на приклади ситуацій, які допоможуть зрозуміти, як саме працювати з цим атрибутом.

Рис. 2. Дерево рішень для alt-атрибута

Нижче окремо розберемо кожну із 9 ситуацій на графіку.

Текст розташований поруч із зображенням як реальний текст

В такому випадку alt-атрибут повинен бути порожнім. На прикладі нижче ви можете побачити, що зображення не несе в собі додаткову інформацію і текст, який вже присутній на зображенні, також міститься поруч. Скрінрідер прочитає цей текст і пропустить зображення.

Рис. 3. Приклад тексту, який є поруч із зображенням

Текст на зображенні використано тільки для візуального ефекту

Так само як для попереднього варіанта, alt-атрибут повинен бути порожнім, якщо текст на картинці і сама картинка не додають змісту до сторінки. Користувачам, які використовують скрінрідери, не потрібна інформація про такі зображення.

Рис. 4. Приклад декоративного тексту на зображенні

Текст на зображенні має функцію, наприклад, є частиною іконки

До прикладу, якщо у нас є кнопка, яка є іконкою принтера з текстом «Print» на зображенні, то найчастіше текст на зображенні можна просто додати до alt-атрибута. Також можна трохи розширити, як на зображенні нижче. Головне не забувати, що текст із зображення повинен міститись в alt-атрибуті, інакше користувач може заплутатись.

Рис. 5. Приклад функціональної іконки з текстом

Тексту, який на зображенні, більше ніде немає на сторінці

Якщо відверто, то взагалі не рекомендують використовувати текст як частину зображення. На це є навіть окремі пункти стандарту — 1.4.5: Images of Text (AA Level) та 1.4.9: Images of Text (No Exception) (AAA Level).

Але якщо це вже використовується і ви не хочете це змінювати, то потрібно долучити текст із зображення до alt-атрибута.

Рис. 6. Приклад тексту на зображенні, якого ніде більше на сторінці немає

Зображення використовується у посиланні чи кнопці. Важко/неможливо зрозуміти без зображення, для чого це посилання чи кнопка

Ця ситуація схожа на ту, що зазначена в пункті 3. Alt-атрибут повинен містити функцію кнопки чи призначення посилання.

Рис. 7. Приклад зображення у кнопці

Зображення має вплив на зміст сторінки чи контексту, і це просте зображення чи фотографія

У цьому випадку потрібно додати короткий текст до alt-атрибута, який пояснить контекст і значення зображення. Якщо ви подивитесь на зображення нижче, то побачите, що сенс зображення не переданий у тексті, тому він доданий в alt-атрибут. Якби контекст був у тексті, то краще було б залишити alt-атрибут порожнім.

Рис. 8. Приклад простого зображення, яке додає контекст

Зображення має вплив на зміст сторінки чи контексту, і це графік або складна інформація

Тут є декілька опцій. Нижче описані найпоширеніші з них.

7.1 В alt-атрибут додається лише назва графіка, а більш повний опис контексту графіка міститься на окремій сторінці. Посилання на цю сторінку має бути поруч із зображенням.

Рис. 9. Приклад графіка з посиланням на більш детальний опис

7.2. Розташування більш детального опису може також додаватись в alt-атрибут, якщо він є на цій же сторінці. Таким чином, користувач буде знати, де шукати.

Рис. 10. Приклад додавання розташування детального опису в alt

7.3. Також можна використовувати тег
з атрибутом role="group«. В такому разі зображення та детальний опис додаються в середину цього тегу. Детальний опис ще додатково проставляється тегом
.

Рис. 11. Приклад додавання детального опису за допомогою тегу <figure>

7.4. Також можна використовувати WAI-ARIA атрибут «aria-describedby» для вказівки на елемент з детальним описом. В цій опції є один нюанс. Текст, який доданий через цей атрибут, читає скрінрідер одразу після тексту в alt-атрибуті без зупинок. Це означає, що у допоміжних технологій не буде можливості використовувати навігацію в цьому елементі. Тобто ця опція підходить тільки, якщо детальний опис представлений у вигляді тексту, а не таблиць, заголовків тощо.

Рис. 12. Приклад використання атрибута aria-describedby

Зображення має вплив на зміст сторінки чи контексту і воно показує контент, який непотрібний реальному тексту поруч або повторює його

Тут треба залишати alt порожнім.

Рис. 13. Приклад зображення з порожнім alt

Також цей пункт часто може використовуватись у ситуаціях, коли зображення має той самий контекст, як і посилання поруч. В такому випадку рекомендують залишити alt порожнім і помістити зображення всередину посилання.

Не забувайте тільки: якщо в посиланні міститься лише зображення без тексту, alt повинен мати якийсь текст.

Рис. 14. Приклад функціонального зображення з порожнім alt

Зображення суто декоративне або не призначене для користувача

Для таких кейсів alt потрібно залишати порожнім. Якщо зображення є бекграундом або додано просто заради краси, то це саме той випадок.

Такі зображення не несуть сенсове навантаження, тому нема потреби відволікати користувачів на них.

Рис. 15. Приклад суто декоративного зображення з порожнім alt

Атрибути aria-labelledby і aria-describedby

Що робити у ситуації, коли у нас є складне зображення, яке представлене через тег <div> з role="img«. Оскільки alt-атрибут не підтримується цим тегом, то використання aria-labelledby для короткого опису або aria-describedby для довгого опису атрибута є гарною ідеєю. Цей атрибут програмно пов’язує елемент з іншим елементом, який є лейблом або описом і має id, який використаний в aria-labelledby або aria-describedby.

Рис. 16. Приклад використання aria-labelledby

Атрибут aria-label

Ви, напевно, помітили, що цей атрибут за назвою дуже схожий на aria-labelledby. У чому ж тоді різниця? А вона полягає в тому, що aria-labelledby додає посилання на інший об’єкт, який містить текст і присутній на екрані. В той час як aria-label самостійно містить текстову альтернативу, і цей текст не відображається на сторінці й може бути прочитаний тільки скрінрідерами або іншими допоміжними технологіями. Тобто використовуйте aria-labelledby, якщо текст лейбл присутній на сторінці, і arial-label, якщо такого тексту немає.

Рис. 17 Приклад використання атрибута aria-label

Атрибут longdesc

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

Чому так? Цей атрибут був частиною специфікації HTML 4.0. Потім у першому випуску HTML5 він був позначений як застарілий. В наступних оновленнях його статус змінили на рекомендоване «HTML-розширення». Таким чином, якщо у певний момент браузери почнуть його підтримувати, то буде сенс його використовувати. На момент написання цієї статті це здається дуже і дуже малоймовірним. Тому longdesc не треба використовувати взагалі.

Рекомендації щодо змісту текстових альтернатив

• Якщо ви використовуєте alt-атрибут, то рекомендують, щоб він був коротким і інформативним. Якщо вам потрібно додати багато інформації, то краще використовувати інші атрибути.
• Не використовуйте слова «picture, „image“, „icon“ для текстової альтернативи, бо користувач, який бачить і так розуміє, що це зображення, а для користувачів, які використовують скрінрідери, зображення буде анонсованим.
• Не використовуйте назви файлів, або плейсхолдери, замість текстової альтернативи.
• Якщо використовується порожній alt=»", перевірте, чи у значенні немає пробілів між лапками.
• Щоб краще зрозуміти, чи є зображення декоративним, спробуйте почитати те, що є на сайті іншій людині. Якщо якесь зображення не буде містити посилання чи кнопку або буде неінформативним і вам захочеться пропустити це зображення, то таке зображення, найімовірніше, буде декоративним.
• Рекомендовано, щоб найважливіша частина текстової альтернативи була на початку речення.
• Використовуйте розділові знаки в текстовій альтернативі, якщо це допоможе передати смислове навантаження.