Директор по маркетингу хостинг-провайдера Cityhost.ua Олег Рівтін та експерт з питань цифрової доступності Дмитро Попов підготували колонку для AIN.UA. Автори зібрали поради, як адаптувати сайт для людей із порушеннями зору.
У публікації відсутнє слово «сліпий» та інші вислови, які знецінюють людину та зводять її особистість лише до однієї характеристики. Саме тому ми вживаємо коректні формулювання — «людина з порушеннями зору», «людина з повною або частковою втратою зору».
Які види порушень зору бувають у людини?
За даними Всесвітньої організації охорони здоров’я, загалом у всьому світі щонайменше 2,2 мільярди людей живе з тією чи іншою формою порушення зору. В Україні, на жаль, офіційної статистики щодо кількості таких людей немає, за неофіційними ж даними, – це більше 100 000 осіб. Усі ці люди хочуть та мають право отримувати інформацію з мережі, але більшість сайтів неадаптовані для них.
У людини може бути повна або часткова втрата зору. Та, на жаль, цими двома видами ситуація не обмежується. Крім них ще є:
- Короткозорість — може чітко бачити предмети лише на близькій відстані.
- Далекозорість — чітко бачить тільки на далекій відстані.
- Астигматизм — всі предмети нечіткі та розмиті.
- Дальтонізм — нездатність розпізнавати ті чи інші кольори.
- Дислексія — це стосується більше роботи мозку, а не порушення зору. При дислексії людина не здатна прочитати текст, хоча чітко його бачить. Мозок погано розрізняє звуки та їхнє зображення на письмі. Тому для людей із дислексією також важливою є адаптація сайтів.
Що саме бачить людина з порушеннями зору на сайті?
Існують спеціальні плагіни та розширення для того, аби зрозуміти, як люди з порушенням зору бачать сайти. Наприклад, можна використовувати розширення для браузера Google Chrome. Ми використали Web Disability Simulator та випробували його. Ось так юзери з порушенням зору бачать сайт AIN.UA:
- Оригінал
- Дальтонізм жовто-блакитного спектра
- Далекозорість
- Цілковитий дальтонізм
Чи потрібно створювати окрему версію сайту для людей із порушеннями зору?
На вже наявному домені (або піддомені) може розташовуватися окрема версія сайту, створена для людей із повною чи частковою втратою зору. Такий варіант зазвичай розробляється без зображень або з мінімумом зображень, з функціями зміни кольору та розміру літер і зручною навігацією. Для переходу на сторінку угорі сайту створюється позначка у вигляді окулярів або просто напис «Контрастна версія».
Серед українських сайтів не часто зустрінеш такі приклади. Зазвичай створюються вони на спеціалізованих сайтах, як, наприклад, сайт Комунальної установи «Інклюзивно-ресурсний центр» Олександрійської районної ради Кіровоградської області.
На знімку з екрана ви можете побачити різницю між двома версіями вебресурсу:
Та в реальності такі окремі версії сайту не відповідають покладеним на них сподіванням. Якщо взяти до порівняння практику країн Заходу, то в них майже не існує окремих інклюзивних версій сайту.
Усе через те, що в підсумку ми маємо інформаційно збіднілу видозмінену сторінку. Тому більшість користувачів повертаються до оригінальної версії. Також не варто забувати, що в людей є різні порушення зору. Тому для деяких із них немає потреби створювати окрему версію, варто просто трішки адаптувати основний сайт.
Коли ви все-таки бажаєте зробити окрему версію, то не треба називати її «Версія для слабобачущих». Це підсилює дискримінацію серед людей. Краще сфокусуватись на функції сайту, а не на порушеннях у людини. Кнопку можна підписати як «Контрастна версія», «Вибір колірної схеми», «Налаштування шрифту». Слід пам’ятати, що така версія сайту буде корисною не тільки для людей із порушенням зору, але і для тих, хто, наприклад, знаходиться під яскравим сонцем.
Як адаптувати сайт для людей з порушеннями зору
Консорціумом всесвітньої мережі (W3C) був створений «Посібник із забезпечення доступності веб-контенту (WCAG)». Він пропонує численні рекомендації, спрямовані на забезпечення більшої доступності веб-контенту. Усі рекомендації створювалися разом із тестувальниками, іншими групами та учасниками Консорціуму, серед яких зокрема є люди з порушеннями зору. Зараз вони працюють у провідних компаніях та продовжують допомагати робити перегляд вебсторінок більш доступним.
«Повітряний» дизайн
Багато простору між елементами, великі фотографії, мінімалізм в усьому — усе це притаманне новому тренду в дизайні. Такий стиль зустрічається в більшості вебсайтів. Зазвичай у верстці застосовується одна колонка на увесь екран. Цей візуал стильний та водночас зручний для користувачів із порушеннями зору.
А головне: не обов’язково потрібно шукати дорогих або спеціалізованих веброзробників. Створити такий сайт можна використовуючи існуючі шаблони в CMS (система керування контентом). Обирайте той варіант, де принцип «повітряного дизайну» реалізовано найкраще.
Робота з кольором
Контраст у кольорах — ще один варіант того, як зробити відвідини сайту більш комфортними. Тут можливі два варіанти: створити функцію зміни колірної гами або відразу додати сайту контрасту. Загалом використовують три типи поєднань кольорів для користувачів із порушенням зору: текст жовтого кольору на синьому фоні, чорний текст на білому фоні та білий текст на чорному тлі. Ось цей аналізатор може стати вам у нагоді при перевірці кольорових рішень.
Не забувайте, що є багато відвідувачів, для яких зручнішою буде темна тема, адже білий колір ріже очі. Коли текст зображений поверх картинки, то обов’язково потрібно дотримуватись вимог щодо контрасту фону, де коефіцієнт має бути не менш ніж 4.5:1.
Спеціалісти з адаптації сайтів радять відмовитися від кольорів для елементів, які несуть смислове навантаження. Такий прийом може лише завдати труднощів людині з порушенням сприйняття кольору. Коли людина не може правильно розрізняти кольори, то інструкція «Перейдіть за червоною стрілкою» просто втрачає сенс.
Шрифт, який легко читати
Мабуть, ви не раз зіштовхувалися із ситуацією, коли шрифт на сайті настільки хитромудрий, що неможливо прочитати. Це проблема всіх користувачів інтернету. Саме тому вебдизайнери користуються простими та зрозумілими шрифтами. Це допомагає й людям із порушеннями зору краще бачити сайт.
Функція зміни розміру літер та масштабування сторінки
Сполучення клавіш Ctrl+ і Ctrl- дозволяє масштабувати сайти на усіх сучасних браузерах. Та головною задачею для веброзробників залишається адаптація верстки сайту, який при зміні масштабу не «поповзе» й усі іконки якого залишаться на місці.
Також можна створити функцію зміни розміру букв та проміжків між ними. Так, якщо збільшити міжрядкові інтервали, то людям із дислексією буде набагато зручніше читати.
Керування за допомогою клавіатури
Не всі люди можуть побачити курсор миші на екрані, натомість вони добре користуються клавіатурою. Тому важливо встановити функцію керування сайтом саме за допомогою цього девайсу. Тоді кожен відвідувач зможе користуватися сайтом через клавіші й не використовувати мишку. Це також необхідно і для людей із порушеннями моторики.
Не забувайте і про візуальний індикатор для фокусу клавіатури. Усі функціональні елементи потрібно виділити серед інших. Кнопки, посилання можна позначити у вигляді рамки чи коротких підказок.
Часто дехто з веброзробників вимикає фокусування в CSS через {outline: none}, що не рекомендується робити. Так ви просто забираєте можливість користуватися сайтом у відвідувачів із порушеннями зору.
Програми екранного доступу (screen reader)
JAWS, SuperNova, NVDA — усе це перелік програм для зчитування інформації з екрана будь-якого електронного гаджета. Для людей, які не здатні прочитати тексти, ці програми просто необхідні. Так, вони можуть не читати сайт, а слухати його.
Для того, щоб програма розпізнала текст, потрібно логічно верстати та використовувати правильну структуру HTML:
- Усім елементам розмітки давайте правильні теги. Для заголовків повинна бути сувора ієрархія H1, H2, H3. Кнопки мають верстатися через тег. І тут важливо сказати, що коли ви берете нелогічні теги, то програми екранного доступу не зможуть правильно зчитати елементи.
- Використовуйте спеціальну розмітку в таблицях. Програми для зчитування інформації допомагають пересуватися по комірках таблиці. Спочатку перед текстом самої комірки озвучується заголовок стовпця або рядка. Це дає можливість зрозуміти інформацію. Тому коли дані розміщенні без табличної розмітки, то користувачам програм важко потім їх розтлумачити.
- Не використовуйте файли у форматі PDF. Тут йдеться про тексти, що були зверстані як зображення у PDF. Подібні тексти програми не зможуть зчитати. Тому публікуйте всі матеріали на сторінках сайту. Якщо ж необхідно застосувати PDF-файли, то робіть це як справжній текст.
- Модальним вікнам — правильна розмітка. Перш ніж додавати до верстки будь-які інші елементи, необхідно спершу засвоїти спеціальну мову розмітки ARIA. Саме за допомогою цієї мови можна створити навіть найскладніший користувацький елемент сайту. В іншому випадку модальні вікна стануть недоступними для користувачів програм для зчитування.
- Використовуйте alt для всіх зображень. Завдяки атрибуту alt текст стає альтернативою зображенню, коли не виходить його побачити/відобразити. Загалом alt створили для опису того, що зображено на картинці. Тепер у ньому часто прописують лише ключові слова, що є неправильним з точки зору адаптації сайту для людей з порушеннями зору.
Впровадивши вказані рекомендації ви покращите ваш вебсайт і зробите його доступним для людей із різними порушеннями зору.
Автор: Олег Рівтін, директор по маркетингу хостинг-провайдера Cityhost.ua та Дмитро Попов, експерт з питань цифрової доступності
