Доступность сайта (WCAG): основы для бизнеса

Доступность сайта — это возможность пользоваться им людям с разными особенностями: со слабым зрением, дальтонизмом, нарушениями слуха или моторики, а также пожилым пользователям и всем, кто открывает сайт в неудобных условиях. Международный ориентир — стандарт WCAG (Web Content Accessibility Guidelines). Для бизнеса базовый уровень доступности — это достаточный контраст текста, подписи к изображениям, работа с клавиатуры, понятные формы, субтитры к видео и логичная структура заголовков.

Разберём, почему доступность выгодна бизнесу, что требует стандарт и с каких шагов начать, не переделывая сайт целиком.

Почему доступность касается каждого бизнеса

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

• Пожилые клиенты. С возрастом ухудшаются зрение и точность движений. Мелкий светло-серый текст и крошечные кнопки отсекают значительную часть платёжеспособной аудитории.
• Временные ограничения. Сломанная рука, усталые глаза, смартфон на ярком солнце, шумная обстановка без наушников — в такой ситуации может оказаться любой.
• Люди с инвалидностью. Пользователи программ экранного доступа, люди с нарушениями слуха и моторики — полноценные клиенты, которые выбирают компании, где им удобно.
• SEO. Многие требования доступности совпадают с тем, что ценят поисковики: структура заголовков, альтернативный текст, понятные ссылки, качественный HTML.
• Экспорт и международные партнёры. В ряде стран требования к доступности цифровых сервисов закреплены законодательно, и крупные заказчики всё чаще проверяют это у поставщиков.
• Репутация. Компания, которая думает о всех клиентах, вызывает больше доверия.

Для государственных сайтов доступность особенно важна — подробнее об этом в статье о дизайне сайтов госорганизаций.

Что такое WCAG и уровни соответствия

WCAG — международные рекомендации по доступности веб-контента, разработанные консорциумом W3C. Актуальная версия — WCAG 2.2. Рекомендации построены на четырёх принципах: контент должен быть воспринимаемым, интерфейс — управляемым, информация — понятной, а код — надёжным, то есть корректно работать с разными браузерами и вспомогательными технологиями.

Требования разделены на три уровня:

• A — минимальный, без которого сайтом часть людей не сможет пользоваться вовсе.
• AA — рекомендуемый уровень, на который обычно ориентируются компании и госорганы во многих странах.
• AAA — максимальный, применяется точечно, для отдельных разделов или специализированных сервисов.

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

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

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

• Контраст. Для обычного текста WCAG требует соотношение контраста не менее 4,5:1 с фоном, для крупного текста — не менее 3:1. Светло-серый текст на белом фоне — частое нарушение.
• Размер и масштабирование. Основной текст должен быть комфортного размера, а страница — корректно работать при увеличении масштаба браузера без потери содержимого.
• Цвет — не единственный сигнал. Если ошибка в форме отмечена только красной рамкой, человек с нарушением цветовосприятия её не заметит. Добавляйте текст или иконку.
• Ссылки. Должны отличаться от обычного текста не только цветом, например подчёркиванием.
• Анимации. Избегайте мигающих элементов и учитывайте системную настройку «уменьшить движение».

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

Управление с клавиатуры и вспомогательные технологии

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

• Все интерактивные элементы — ссылки, кнопки, меню, поля, слайдеры — должны быть доступны с клавиатуры.
• Фокус должен быть хорошо виден: дизайнеры нередко убирают обводку, «потому что некрасиво», и пользователь теряется на странице.
• Порядок перехода по элементам должен соответствовать логике страницы.
• Модальные окна должны закрываться клавишей Esc и не «запирать» пользователя.
• У изображений, которые несут смысл, должен быть альтернативный текст (alt), описывающий содержание. Декоративные изображения помечаются пустым alt.
• Иконки-кнопки без текста (лупа, корзина, меню) нужно снабдить понятной подписью для экранных программ.

Доступный сайт — это не отдельная версия «для слабовидящих», а хорошо сделанный сайт, которым удобно пользоваться всем. Большинство требований доступности — просто признаки качественного дизайна и кода.

Структура, тексты и формы

• Заголовки. Логичная иерархия h1–h2–h3 помогает и программам экранного доступа, и обычным читателям, которые просматривают страницу по диагонали.
• Язык страницы. Атрибут lang должен соответствовать языку версии, иначе программа зачитает узбекский текст с русским произношением.
• Понятные ссылки. «Подробнее о доставке» лучше, чем десять ссылок «Подробнее» на одной странице.
• Простой язык. Короткие предложения, понятные термины, списки вместо сплошного текста.
• Формы. У каждого поля — видимая подпись, а не только подсказка внутри поля, которая исчезает при вводе. Ошибки описаны текстом: что не так и как исправить.
• Капча. Если она нужна, выбирайте варианты, которые не требуют распознавать искажённый текст или картинки.

Видео, аудио и документы

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

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

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

1. Тест клавиатурой. Отложите мышь и пройдите ключевой сценарий — например, от главной до отправки заявки — только клавишами Tab, Enter и стрелками. Видно ли, где фокус? Всё ли нажимается?
2. Автоматическая проверка. Lighthouse в браузере Chrome и расширения вроде axe находят часть проблем: контраст, отсутствие alt, подписи полей. Помните, что автоматически выявляется лишь часть нарушений.
3. Масштаб. Увеличьте масштаб браузера до 200% и проверьте, не наезжают ли элементы друг на друга и не пропадает ли содержимое.
4. Программа экранного доступа. Попробуйте встроенную в смартфон или компьютер функцию озвучивания экрана — VoiceOver на устройствах Apple, TalkBack на Android или бесплатную NVDA для Windows.
5. Живые пользователи. Если есть возможность, попросите протестировать сайт пожилых родственников или людей, которые пользуются вспомогательными технологиями.

Проверку доступности удобно совместить с общим UX-аудитом — см. чек-лист UX-аудита.

С чего начать: приоритеты

Не обязательно исправлять всё сразу. Разумный порядок:

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

Если вы планируете новый сайт или редизайн, доступность дешевле всего заложить на этапе проектирования. Команда Dasta Creative учитывает требования WCAG при разработке дизайна и проверяет ключевые сценарии — подробнее на странице веб-дизайна.