Как люди с инвалидностью пользуются сайтами: технологии и барьеры

Три человека пытаются забронировать столик на сайте одного и того же ресторана. Амира незрячая и слушает страницу через 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. Эти проверки разобраны в нашем руководстве «Как проверить доступность сайта». Они не заменят тестирования с людьми, которые пользуются этими инструментами каждый день, но покажут, с чего начать.