Доступность сайта для людей с ограничениями: что сделать и как проверить

Доступность сайта часто воспринимают как отдельную «версию для слабовидящих» с огромным шрифтом и чёрно-белой гаммой. На деле это набор инженерных и дизайнерских решений, встроенных в обычный сайт: достаточный контраст, понятная структура заголовков, работа с клавиатуры, подписи к полям и изображениям. Такие решения помогают людям с ограничениями здоровья, но выигрывают от них все посетители — и сам бизнес.

Кому на самом деле нужна доступность

Когда мы обсуждаем доступность с заказчиками, первая реакция обычно такая: «Наши клиенты — обычные люди, незрячие к нам не заходят». Это ошибка в двух смыслах. Во-первых, людей с постоянными нарушениями зрения, слуха, моторики или когнитивных функций гораздо больше, чем кажется: по разным оценкам, это каждый десятый взрослый, а с учётом возрастного ухудшения зрения — заметно больше. Во-вторых, ограничения бывают временными и ситуативными.

Человек со сломанной рукой листает сайт одной рукой. Покупатель в метро смотрит каталог без звука. Водитель на парковке читает экран под прямым солнцем, и бледно-серый текст на белом фоне для него просто исчезает. Пожилой клиент увеличивает масштаб страницы до 200%, и вёрстка разъезжается. Все эти люди — ваша аудитория, и всем им мешают одни и те же ошибки.

Есть и прагматичная сторона. Структура, понятная экранному диктору, понятна и поисковому роботу. Подписи к изображениям, логичные заголовки, текстовые ссылки вместо «нажмите здесь» одновременно улучшают доступность и помогают SEO. А формы, которые корректно сообщают об ошибках, отправляют чаще — это прямые деньги.

Четыре принципа, на которых всё держится

Международные рекомендации по доступности веб-контента сводятся к четырём принципам. Их удобно использовать как рамку при проектировании и проверке, даже если вы не собираетесь проходить формальную сертификацию.

Почти каждая конкретная рекомендация в этой статье вытекает из одного из этих принципов. Если сомневаетесь, нужна ли какая-то правка, спросите себя: сможет ли человек получить эту информацию, если он не видит экран, не слышит звук или не пользуется мышью?

Визуальная часть: контраст, шрифт, цвет

Контраст текста

Самая распространённая проблема доступности — недостаточный контраст. Дизайнеры любят светло-серый текст на белом фоне: он выглядит элегантно на калиброванном мониторе в офисе. На бюджетном смартфоне с пониженной яркостью такой текст не читается вовсе. Для основного текста рекомендуемое соотношение контраста — не менее 4,5:1, для крупного (от 24 пикселей или от 19 пикселей полужирным) — не менее 3:1. Например, серый #999999 на белом даёт около 2,8:1 и не проходит, а #595959 даёт 7:1 и читается уверенно.

Цвет как единственный сигнал

Около 8% мужчин в той или иной форме не различают красный и зелёный. Если ошибка в форме обозначена только красной рамкой, а наличие товара — только зелёной точкой, часть посетителей этой информации не получит. Решение простое: дублировать цвет иконкой, текстом или формой. «Нет в наличии» словами плюс серая плашка работает для всех.

Размер и масштабирование

Основной текст — не меньше 16 пикселей на мобильных устройствах, межстрочный интервал — 1,4–1,6 от размера шрифта. Страница должна корректно работать при увеличении до 200%: без горизонтальной прокрутки, наложения блоков и обрезанного текста. Запрет масштабирования в мета-теге viewport — грубая ошибка, которую до сих пор встречаем в шаблонах. Подробнее о размерах и интерлиньяже — в статье про типографику на сайте.

Клавиатура и фокус

Проверить управление с клавиатуры можно за пять минут без специальных инструментов. Откройте главную страницу, уберите руку с мыши и нажимайте Tab. Фокус должен последовательно переходить по ссылкам, кнопкам и полям в логичном порядке — сверху вниз, слева направо. На каждом шаге должно быть видно, где именно находится фокус.

Типичные проблемы, которые обнаруживаются при таком тесте:

• обводка фокуса отключена стилями целиком, потому что дизайнеру «не понравилась синяя рамка»;
• выпадающее меню открывается только по наведению мыши, и до вложенных пунктов с клавиатуры не добраться;
• модальное окно открылось, но фокус остался на странице под ним, а закрыть окно клавишей Esc нельзя;
• кастомные элементы — слайдеры, переключатели, выбор цвета товара — сделаны из обычных блоков без ролей и не получают фокус вообще;
• в начале страницы нет ссылки «Перейти к содержимому», и пользователь на каждой странице проходит через 40 пунктов меню.

Стиль фокуса не обязан быть уродливым. Аккуратная обводка в фирменном цвете толщиной 2–3 пикселя с небольшим отступом от элемента выглядит частью дизайна. Хорошая практика — показывать её только при навигации с клавиатуры, а не при клике мышью; современные браузеры это поддерживают.

Разметка, которую понимают экранные дикторы

Незрячий пользователь «видит» страницу через программу экранного доступа, которая зачитывает её содержимое и позволяет перемещаться по заголовкам, ссылкам, областям страницы. Поэтому для него критична семантика — то, как размечен контент.

Отдельная история — кнопки-иконки: корзина, поиск, избранное, закрыть. Зрячему пользователю всё понятно по пиктограмме, а диктор прочитает «кнопка» без пояснений. Каждой такой кнопке нужна текстовая подпись, скрытая визуально, но доступная программам. Это две минуты работы на элемент.

То же касается видео и анимации. Если на странице есть ролик о продукте, у него должны быть субтитры, а ключевая информация из ролика — продублирована текстом рядом. Автоматически запускающееся видео со звуком мешает пользователям дикторов: голос программы смешивается со звуком ролика. А мигающие баннеры и резкая анимация способны вызвать дискомфорт у людей с вестибулярными нарушениями, поэтому сайт должен учитывать системную настройку «уменьшить движение».

Формы и сообщения об ошибках

Формы — место, где проблемы доступности напрямую превращаются в потерянные заявки. Плейсхолдер вместо подписи исчезает при вводе, и человек с нарушениями памяти или внимания забывает, что вводит. Ошибка, показанная красным цветом без текста, непонятна дальтонику и не озвучивается диктором. Капча из искажённых символов непроходима для слабовидящих.

• У каждого поля есть видимая подпись, связанная с ним в разметке.
• Обязательные поля помечены не только звёздочкой, но и текстом или общей пояснительной фразой.
• Ошибка описана словами рядом с полем: «Укажите телефон в формате 999 123-45-67», а не «Неверный ввод».
• После неудачной отправки фокус переходит к первому полю с ошибкой.
• Для полей заданы корректные типы и подсказки автозаполнения: телефон, e-mail, имя, адрес.
• Защита от спама не требует распознавать картинки — используются невидимые проверки.
• Чекбокс согласия на обработку данных кликабелен вместе с текстом, а не только крошечным квадратом.

Все эти пункты одновременно снижают долю брошенных форм у обычных пользователей. Мы неоднократно видели, как после переделки формы по правилам доступности конверсия отправки росла на 10–20% без каких-либо изменений в дизайне страницы.

Как проверить сайт: план на один день

Полноценный аудит доступности — работа специалиста на несколько дней. Но базовую проверку можно провести за день своими силами и найти большую часть серьёзных проблем.

1. Автоматическая проверка. Встроенные инструменты разработчика в браузере умеют находить недостаточный контраст, отсутствующие alt, поля без подписей, ошибки в иерархии заголовков. Автоматика ловит около трети проблем, но делает это быстро.
2. Тест клавиатурой. Пройдите основной сценарий — от главной до отправленной заявки или оформленного заказа — без мыши.
3. Масштаб 200%. Увеличьте страницу в браузере и проверьте, что ничего не обрезается и не накладывается.
4. Экранный диктор. Включите встроенный диктор в операционной системе телефона и попробуйте найти товар и положить его в корзину. Даже десять минут такого опыта меняют отношение к разметке.
5. Оттенки серого. Переключите экран в чёрно-белый режим и посмотрите, не потерялась ли информация, переданная только цветом.

Результаты стоит сразу разложить на быстрые правки (контраст, подписи, alt, стили фокуса) и доработки, требующие переделки компонентов (меню, модальные окна, кастомные элементы форм). Первые обычно укладываются в несколько часов, вторые разумно планировать в рамках доработок или при редизайне сайта.

Итоги: доступность как стандарт качества

Доступность — это не отдельная версия сайта и не значок с очками в шапке, а свойство нормально сделанного интерфейса. Контрастный текст, работа с клавиатуры, семантическая разметка, подписанные поля и понятные ошибки помогают людям с ограничениями, но одновременно делают сайт удобнее для всех, повышают конверсию форм и улучшают понимание страниц поисковыми системами.

Дешевле всего закладывать доступность при проектировании: проверять контраст палитры, рисовать состояния фокуса в макетах, требовать от разработчиков семантической вёрстки. Исправлять готовый сайт тоже можно — начните с однодневной проверки по плану выше и закройте быстрые правки, а затем постепенно переделывайте проблемные компоненты.