Доступность сайта: зачем бизнесу думать о людях с плохим зрением и что это даёт всем остальным

Веб-доступность (по-английски accessibility, сокращённо a11y) — это свойство сайта, при котором им могут пользоваться люди с ограничениями по зрению, слуху и моторике: читать текст, заполнять формы и оформлять заказ без посторонней помощи. Речь не о кнопке «версия для слабовидящих», а о том, как сделан основной сайт: достаточный контраст, управление с клавиатуры, подписи у картинок и полей, понятные сообщения об ошибках. Ориентиры — международный стандарт WCAG и российский ГОСТ Р 52872. Ниже — что требуется от разных сайтов, что входит в это понятие, как проверить свой сайт за десять минут и с чего начать исправления.

Почему кнопка «версия для слабовидящих» — не решение

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

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

Кому мешает недоступный сайт

Программа экранного доступа, или скринридер, — это приложение, которое зачитывает содержимое экрана вслух. Она не видит страницу, а читает её код: если в коде у кнопки нет названия, человек услышит только слово «кнопка».

Что требуют стандарты и закон

Основных документов два. WCAG (Web Content Accessibility Guidelines) — международные рекомендации, на которые опираются разработчики во всём мире. У них три уровня соответствия: A, AA и AAA. ГОСТ Р 52872 — российский стандарт о доступности цифрового контента, основанный на WCAG.

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

Практический ориентир для бизнеса — тот же WCAG уровня AA. Это не юридическая обязанность, а понятный стандарт, по которому можно проверить сайт и поставить задачу разработчику.

Что входит в доступность сайта

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

Масштабирование и удобство на небольших экранах тесно связаны с тем, как сделана мобильная версия, — об этом мы писали в статье про адаптивную вёрстку.

Что доступность даёт бизнесу и всем остальным посетителям

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

Клиентский пример: сеть медицинских центров переделала форму онлайн-записи по правилам доступности — подписи полей, понятные ошибки, работа с клавиатуры, крупные кнопки. Цель была в соответствии требованиям. Побочный эффект: доля завершённых записей выросла на 18% у всех посетителей, потому что форма просто стала понятнее.

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

Как проверить сайт на доступность за десять минут

1. Запустите автоматическую проверку. В браузере Chrome откройте инструменты разработчика, вкладку Lighthouse, и отметьте категорию Accessibility — в русском интерфейсе она может называться «Специальные возможности». Расширения вроде axe DevTools и WAVE показывают проблемы прямо на странице. Это бесплатно и занимает минуты.
2. Попробуйте пройти ключевой сценарий — заявку или заказ — только с клавиатуры, без мыши. Где застряли, там и проблема.
3. Проверьте контраст основных текстов онлайн-инструментом: он покажет, проходит ли пара цветов уровень AA. Если нет, это правка стилей на час.
4. Увеличьте масштаб страницы в браузере в полтора-два раза. Текст не должен наезжать на соседние блоки и прятаться за край экрана.
5. Откройте несколько страниц и посмотрите, есть ли alt-тексты у картинок и названия у кнопок-иконок.
6. Для критичных сценариев послушайте сайт программой экранного доступа: NVDA для Windows бесплатна, на телефонах есть встроенные TalkBack и VoiceOver.

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

Частые проблемы и как их исправить

С чего начать: порядок работ

1. Выберите ключевые сценарии: заявка, заказ, запись, страница контактов. Именно они должны работать у каждого посетителя.
2. Проверьте их автоматически и вручную с клавиатуры.
3. Сначала исправьте то, что блокирует сценарий полностью: кнопку, которую нельзя нажать, форму, которую нельзя отправить.
4. Затем — контраст и подписи: это быстро и заметно всем посетителям.
5. Включите правила в работу с контентом: альтернативный текст при загрузке каждой картинки, субтитры к новым видео.
6. При следующей доработке или редизайне запишите требования к доступности в техническое задание.
7. Повторяйте проверку после обновлений: новая форма или баннер легко возвращают старые проблемы.

Базовые правки — контраст, alt-тексты, подписи полей, фокус с клавиатуры — обычно укладываются в несколько дней работы. Полное соответствие стандарту для большого сайта — отдельный проект, но первые шаги закрывают большую часть проблем и делают сайт заметно лучше для всех. Дешевле всего закладывать эти требования на старте: как описать их разработчику, смотрите в статье про ТЗ на сайт, а если впереди обновление дизайна — в материале про редизайн сайта.

Частые ошибки

• Считают, что кнопка «версия для слабовидящих» закрывает вопрос. Она меняет размер шрифта, но не делает формы и меню рабочими.
• Ставят готовый виджет-панель вместо исправления вёрстки. Надстройка не добавит кнопкам названий и не научит меню работать с клавиатуры.
• Убирают рамку фокуса, потому что «некрасиво». Человек с клавиатурой перестаёт понимать, где он находится.
• Набивают alt ключевыми словами. Описание картинки пишется для человека, который её не видит.
• Полагаются только на автоматическую проверку. Высокая оценка в отчёте не означает, что заказ можно оформить без мыши.
• Исправляют главную страницу и забывают про форму заказа. Важен весь путь до результата, а не отдельный экран.
• Оставляют проверку «я не робот» в виде картинки без альтернативы. Для незрячего пользователя это глухая стена.

Чек-лист доступного сайта

• Основной текст контрастен и читается на телефоне при ярком свете.
• Заявку или заказ можно оформить только с клавиатуры.
• При переходе клавишей Tab видно, какой элемент выбран.
• У содержательных картинок есть альтернативный текст.
• У кнопок-иконок есть названия, у полей форм — постоянные подписи.
• Ошибки в формах объясняются словами.
• При увеличении масштаба страница остаётся читаемой.
• У видео есть субтитры или текстовая расшифровка.

Коротко

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

Мы в CasperLab проверяем доступность при сдаче каждого проекта, а для существующих сайтов делаем аудит с приоритетами: что чинить срочно, что — при ближайшей доработке. Если ваш сайт — единственный способ записаться или заказать, стоит убедиться, что им может воспользоваться каждый. Исправить найденное можно в рамках доработки сайта.