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

Понад 2,7 млн людей в Україні мають ту чи іншу форму інвалідності, зокрема порушення зору. Ці люди також користуються інтернетом, але для цього їм потрібні додаткові інструменти, наприклад, скрінрідер або читач екрану (англ. “screen reader").  

Тимчасові порушення зору також можуть викликати потребу скористатися допоміжними технологіями (англ. “assistive technology”) чи адаптувати сайт до тих чи інших потреб. Отже, виключається ще більша кількість користувачів.

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

Якими є найбільш поширені проблеми під час розробки та дизайну сайту, і як зробити користування вашою платформою комфортною для користувачів із порушеннями зору? Зібрали для вас поради від експерта Руслана Іськова, які він презентував під час тренінгу «Як зробити інклюзивною роботу у цифровому світі?», організованого ПРООН і Мінцифрою 10 серпня 2021 р.

Такі правила допоможуть уникнути найпоширеніших помилок з доступності та зробити ваш сайт більш інклюзивним. 

1. Спочатку – найголовніше

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

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

2. «Чітке бачення»

Маєте непоганий зір? А тепер пригадайте, як деякі сайти практично неможливо переглядати на смартфоні при яскравому сонці.

Сірий текст на чорному тлі – не дуже гарна ідея. Користувачам із дуже низьким рівнем зору, а також з «кольоровою сліпотою» (тобто неможливістю добре розрізняти деякі поєднання кольорів), важко, а часом і зовсім неможливо, прочитати текст, коли його колір мало відрізняється від кольору тла. 

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

Також залишайте достатньо вільного простору між окремими блоками і елементами вебсторінки, щоб вони не «зливались» між собою.

3. Картинки, «що говорять»

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

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

Альтернативний текст має дуже коротко і влучно пояснювати суть того, що зображено. Наприклад, «жінка використовує ноутбук із Windows 10 і OneDrive».

Уникайте в альтернативному тексті слів «зображення», «картинка» – скрінрідер сам розпізнає наявність графічного елемента і повідомить про це.

4. Приховуємо неважливе

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

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

Приховувати можна не лише зображення, а й інші «неважливі» елементи вебсторінки.

5. Все має своє значення

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

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

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

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

6. Зрозумілі посилання

Текст для кожного посилання має бути унікальним на вебсторінці. Наприклад, сайт містить перелік новин із заголовками та анонсами, наприкінці яких стоять посилання «Читати повністю…». Скрінрідер дозволяє переміщатись між посиланнями або навіть проглянути одразу усі посилання, які присутні на вебсторінці. Якщо вони названі ідентично, для користувача скрінрідера вони усі будуть однаковими, адже не зрозуміло, до якого заголовку і частини сайту вони належать.

Також текст посилання має чітко і зрозуміло визначати, куди саме воно веде. Посилання із назвою «Клацніть тут» – погана ідея.

7. Заголовки – це важливо

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

Кожна вебсторінка повинна мати один і лише один заголовок першого рівня. І такий заголовок має розташовуватися одразу перед основним контентом вебсторінки. Перейшовши до такого заголовку, користувач одразу переглядає найбільш необхідне і пропускає усе «зайве».

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

8. Тільки клавіатура

Користувачі з порушеннями зору не можуть побачити вказівника миші, тому відповідно і не можуть використовувати цей метод взаємодії з вебсторінкою. А ось запам'ятати розташування клавіш на клавіатурі – насправді, не так і складно.

Хочете перевірити, чи є ваш сайт доступним? Ось вам самий простий тест. Відключіть мишку – і якщо ви не можете виконати якусь дію на сайті лише за допомогою клавіатури, тест ви не пройшли.

Але є й хороша новина: будь-який сайт можна зробити доступним. При цьому, сайт ні в чому не постраждає, а бізнес від того лише здобуде: людина із порушеннями зору не буде користуватися недоступним сайтом. Чи хочете ви втратити покупця? Рішення за вами.

Довідково 

Руслан Іськов – Python-розробник, автор і викладач навчальних курсів з програмування для людей з порушеннями зору, експерт із питань доступності.

Тренінг «Як зробити інклюзивною роботу у цифровому світі?», організований партнерами екосистеми Імпакт.юа спільно з авторами курсу «Інклюзивний дизайн» на платформі Projector – Славою Шестопаловим, Євгенієм Шикірявим та авторкою курсу з дизайну Валерією Паніною. Його метою було показати важливість цифрової доступності у процесі пошуку роботи, навчання та комунікацій людям з повним або частковим порушенням зору.

Захід відбувався 10 серпня за підтримки Міністерства цифрової трансформації України та Програми розвитку ООН (ПРООН) в Україні у межах проєкту «Цифрові, інклюзивні, доступні: підтримка цифровізації державних послуг в Україні (Підтримки DIA)», що реалізується за фінансової підтримки Швеції.

Запис тренінгу можна переглянути за посиланням.

Автори:

Руслан Іськов, експерт з питань доступності, Python-розробник, автор і викладач навчальних курсів з програмування для людей з порушеннями зору Python Starter та Python Essential,

Ольга Матягіна, фахівчиня з комунікацій, Проєкт підтримки Дія, ПРООН