Як люди з інвалідністю користуються сайтами: технології та бар’єри

Троє людей намагаються забронювати столик на сайті того самого ресторану. Аміра незряча й слухає сторінку через VoiceOver на своєму iPhone. Том має ревматоїдний артрит і користується клавіатурою, бо працювати мишею боляче. Маргіт 78 років, і вона збільшує масштаб до 200%, щоб прочитати меню. Якщо меню — це фотографія друкованої сторінки, а вибір дати реагує лише на мишу, усі троє здаються й бронюють столик деінде.

Цей посібник пояснює, як люди з інвалідністю насправді користуються інтернетом, і спирається на актуальні дані. Щодо слів: ми пишемо «люди з інвалідністю», як це роблять інституції ЄС (persons with disabilities), хоча багато хто, особливо у Великій Британії, віддає перевагу англійському «disabled people». Коли пишете про конкретну людину, використовуйте ті слова, які використовує вона сама.

Скільки людей живуть з інвалідністю?

Близько 1,3 млрд людей — 16% населення світу, або кожна шоста людина, — живуть зі значною інвалідністю, за даними Всесвітньої організації охорони здоров’я (відкриється в новій вкладці) (інформаційний бюлетень, березень 2023 року). У ЄС у 2024 році 23,9% людей віком від 16 років повідомили про тривале обмеження в повсякденній діяльності — це приблизно кожен четвертий дорослий, за даними Євростату (відкриється в новій вкладці).

Показники за країнами коливаються від 12,7% у Болгарії до 41,2% у Латвії, а дані ґрунтуються на самооцінці, тож порівнювати країни слід обережно. Важливіша вікова крива. Серед людей віком 85 років і старше ця частка удесятеро вища (відкриється в новій вкладці) (72,3%), ніж серед 16–24-річних (7,1%), а 22,0% населення ЄС (відкриється в новій вкладці) — люди віком 65 років і старші. Багато з них не назвали б себе людьми з інвалідністю.

Що таке допоміжні технології?

Допоміжні (асистивні) технології — це будь-які програми чи пристрої, які дають людині змогу користуватися комп’ютером, телефоном чи сайтом так, як підходить її тілу та сприйняттю. Найвідоміші приклади — скринрідери, екранні лупи, розпізнавання мовлення, кнопкові перемикачі й брайлівські дисплеї. Люди також покладаються на простіші налаштування: більший текст, повільніший вказівник чи субтитри, увімкнені за замовчуванням.

W3C називає такі прості налаштування «адаптивними стратегіями» й у своєму огляді інструментів і прийомів (відкриється в новій вкладці) описує їх як «прийоми, якими люди з інвалідністю користуються, щоб покращити взаємодію з вебом». Більшість людей поєднують і те, і те.

Багато що з цього вже вбудовано: VoiceOver і «Керування голосом» на пристроях Apple, TalkBack і Voice Access на Android, «Диктор» і «Екранна лупа» у Windows. Чимало користувачів Windows додатково встановлюють платний JAWS або безкоштовний NVDA.

Як незрячі люди користуються сайтами?

Більшість незрячих людей користуються скринрідером — програмою, що перетворює сторінку на мовлення чи шрифт Брайля, — і переміщуються нею за допомогою клавіатурних команд або жестів, а не миші. Сторінку цілком, згори донизу, вони слухають рідко. В опитуванні WebAIM 2024 року 71,6% користувачів скринрідерів сказали, що на довгій сторінці спершу орієнтуються за заголовками.

Опитування користувачів скринрідерів № 10 (відкриється в новій вкладці) від WebAIM зібрало 1539 відповідей у грудні 2023 та січні 2024 року. Це добровільна вибірка, а не перепис. Деякі результати:

• На комп’ютері 40,5% переважно користуються JAWS, 37,7% — NVDA і 9,7% — VoiceOver.
• 91,3% користуються скринрідером на телефоні чи планшеті, а 70,6% — переважно пристроями Apple.
• 38% використовують виведення шрифтом Брайля — через дисплей, який піднімає штирки, що утворюють символи.

Уявіть користувача скринрідера на сторінці товару. Він відкриває список заголовків і переходить до «Відгуків». Вашого макета він не бачить узагалі, лише структуру під ним: якщо заголовки у вас — просто жирні абзаци, список буде порожній, а три кнопки «До кошика» звучать однаково.

• Заголовки — справжні елементи заголовків у логічному порядку.
• Альтернативний текст, що каже про головне: «Темно-синє вовняне пальто до колін, вигляд спереду», а не «IMG_4471.jpg». Декоративні зображення мають порожній альтернативний текст, щоб їх пропускали.
• Підписи до кожного поля форми й повідомлення про помилки, які озвучуються, а не лише показуються червоним.
• Текст посилань і кнопок, зрозумілий сам собою: «Прочитати правила повернення», а не «Натисніть тут».

Як сайтами користуються слабозорі люди?

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

За сильного збільшення користувач екранної лупи бачить лише невелику частину екрана. Повідомлення «Кошик оновлено» у верхньому куті легко пропустити, як і зведення помилок, розміщене далеко від поля з помилкою.

Настанови з доступності вебконтенту (WCAG) 2.2 (відкриється в новій вкладці) покривають це трьома критеріями успішності рівня AA: текст має збільшуватися до 200% без втрати контенту (1.4.4), контент має перебудовуватися за ширини 320 CSS-пікселів, щоб нікому не доводилося прокручувати у двох напрямках (1.4.10), а сторінки мають витримувати збільшені міжрядкові, міжлітерні й міжслівні інтервали (1.4.12). Про контраст читайте в нашому посібнику з колірного контрасту. А сфотографоване меню, якщо перетворити його на вебсторінку із заголовками, підійде і Маргіт, і Амірі.

Як глухі люди та люди з порушеннями слуху користуються інтернетом?

Глухі люди та люди з порушеннями слуху користуються інтернетом так само, як усі інші, доки інформацію не починає передавати звук. Тоді їм потрібні субтитри до відео, розшифровки аудіо й спосіб зв’язатися з вами, відмінний від телефонного дзвінка. За оцінкою ВООЗ, 430 млн людей, понад 5% населення світу, потребують реабілітації через інвалідизувальну втрату слуху.

Для багатьох глухих, особливо тих, хто вважає себе частиною культури глухих (англійською цю належність часто позначають великою літерою: Deaf), першою мовою є національна жестова мова, а письмова — другою. Простий текст допомагає їм так само, як будь-кому, хто читає нерідною мовою.

• Додавайте субтитри до кожного попередньо записаного відео з мовленням (WCAG 1.2.2, рівень A). Перевіряйте автоматичні субтитри: вони можуть перекручувати імена, назви товарів і числа.
• Пропонуйте способи зв’язку, крім телефону. «Щоб скасувати, зателефонуйте нам» повністю відрізає частину клієнтів.
• Не вмикайте звук автоматично. Аудіо, що грає довше ніж 3 секунди, має мати кнопку паузи чи зупинки (WCAG 1.4.2), і користувачам скринрідерів вона теж потрібна.

Як люди з порушеннями моторики переміщуються сайтами?

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

WCAG починає з клавіатури: усе має працювати без миші (2.1.1, рівень A). Що зазвичай заважає:

• Невидимий фокус. Якщо прибрати контур фокуса заради вигляду, користувач клавіатури перестане розуміти, де він (WCAG 2.4.7).
• Довгий шлях. Користувач кнопкового перемикача перебирає елементи керування по одному. Мегаменю на 60 посилань без посилання «Перейти до основного вмісту» може означати 60 натискань, перш ніж він дістанеться до товару.
• Підписи, що не збігаються. Користувач голосового керування каже «натиснути Забронювати», але в коді кнопка називається «Надіслати форму», тож нічого не відбувається (WCAG 2.5.3 «Підпис в імені»).
• Крихітні області натискання й повзунки, які можна лише перетягувати. WCAG 2.2 встановлює мінімальний розмір області натискання 24 на 24 CSS-пікселі (2.5.8) і вимагає альтернативи перетягуванню у вигляді клацання (2.5.7). Обидва критерії розібрано в нашому посібнику з WCAG 2.2.

Як інтернетом користуються люди з когнітивними порушеннями, дислексією чи СДУГ?

Люди з когнітивними порушеннями й труднощами в навчанні, зокрема з дислексією, СДУГ, порушеннями пам’яті та наслідками черепно-мозкових травм, поєднують різні інструменти й прийоми: озвучення тексту, перевірку правопису, лінійки для читання, менеджери паролів, режим читання й додатковий час. Найбільше допомагає те, що є на вашому боці екрана: зрозуміла мова, передбачувані макети й процеси, які не карають за помилки.

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

Вхід, за якого треба ввести третій і п’ятий символи кодового слова, — саме та перевірка пам’яті, від якої застерігає друга ціль. Карусель, що змінюється кожні кілька секунд, працює проти першої. Що допомагає, зокрема дослідження шрифтів для дислексії, ми розбираємо у статті «Дизайн для людей із дислексією, СДУГ і когнітивними порушеннями».

Якими вбудованими налаштуваннями користуються люди і до чого тут панель на сторінці?

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

• Масштаб і розмір тексту: використовуйте відносні одиниці й ніколи не блокуйте масштабування щипком на мобільних пристроях.
• Зменшення руху: сайти можуть прочитати це налаштування (медіазапит prefers-reduced-motion), тож враховуйте його для паралаксу, каруселей і великих переходів.
• Високий контраст і примусові кольори, наприклад контрастні теми Windows: перевірте, що значки й контури фокуса залишаються видимими.
• Режим читання найкраще працює зі справжніми заголовками й абзацами.

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

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

Що найчастіше ламає роботу із сайтом?

Ті самі елементарні бар’єри трапляються знову й знову. Під час сканування WebAIM Million 2026 (відкриється в новій вкладці) на 95,9% з мільйона найпопулярніших головних сторінок виявлено порушення WCAG — у середньому 56,1 помилки на сторінку, і найчастіше це текст із низьким контрастом, відсутній альтернативний текст і поля форм без підписів. Користувачі скринрідерів називають найпроблемнішим елементом в інтернеті CAPTCHA.

Сканування багато чого не помічає. П’ять головних проблем на думку самих користувачів скринрідерів:

1. CAPTCHA
2. Меню, вкладки й діалогові вікна, що поводяться не так, як очікується
3. Посилання чи кнопки з незрозумілими назвами
4. Екрани чи їхні частини, що несподівано змінюються
5. Недоступність із клавіатури

Жодна з цих проблем не потребує для виправлення особливих технологій. Щоб їх знайти, спробуйте свій сайт самі: забронюйте щось, користуючись лише клавіатурою, збільште масштаб до 400% і прочитайте сторінку оформлення замовлення, потім прослухайте свої заголовки у VoiceOver чи NVDA. Ці перевірки розібрано в нашому посібнику «Як перевірити доступність сайту». Вони не замінять тестування з людьми, які користуються цими інструментами щодня, але покажуть, з чого почати.