WCAG для малого бизнеса простыми словами

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

01Что такое WCAG и зачем он бизнесу

WCAG (Web Content Accessibility Guidelines) — рекомендации консорциума W3C по созданию веб-контента, доступного людям с разными ограничениями: слабовидящим, незрячим, со снижением слуха, моторики или когнитивных функций. Стандарт имеет три уровня: A (минимум), AA (рабочий уровень для бизнеса) и AAA (для специализированных проектов).

Малому бизнесу обычно достаточно ориентироваться на уровень AA. Это не только этичная история: доступный сайт удобнее всем — пожилым клиентам, людям с временной травмой руки, тем, кто заходит с яркой улицы и не видит экран. А ещё доступность косвенно влияет на поисковое продвижение, потому что пересекается с поведенческими метриками. Подробнее — в статье доступность как фактор SEO.

02Четыре принципа WCAG

В основе стандарта — четыре принципа, которые легко запомнить.

Воспринимаемость

Контент должен быть доступен разным органам чувств: у картинок есть alt, у видео — субтитры, у иконок — текстовые подписи. Сайт должен читаться и без CSS.

Управляемость

Все действия можно выполнить с клавиатуры. Никаких ловушек фокуса, понятные ссылки, достаточно времени для заполнения форм.

Понятность

Текст написан простым языком, формы дают понятные сообщения об ошибках, элементы интерфейса работают предсказуемо.

Надёжность

Вёрстка валидна, ARIA используется по делу, контент корректно читают вспомогательные технологии.

03Что реально внедрить за неделю

Если у вас обычный корпоративный сайт или магазин на WordPress, начните с базового набора. Эти пункты дают самый заметный эффект и не требуют переписывания шаблона.

• Контраст текста. Основной текст и фон должны давать коэффициент контраста не ниже 4,5:1. Серое на светло-сером — типичная ошибка дизайнеров.
• Alt у картинок. Описание сути изображения, а не «img_2034.jpg». Декоративные картинки получают пустой alt=””.
• Видимый фокус. При навигации клавишей Tab пользователь должен видеть, на каком элементе сейчас курсор. Если в CSS убрали outline — верните или замените на стилизованный.
• Метки в формах. Каждое поле сопровождается label, плейсхолдер не заменяет подпись.
• Структура заголовков. Один H1 на страницу, дальше H2, H3 по смыслу, без пропуска уровней.
• Понятные ссылки. Текст ссылки описывает действие («Скачать прайс»), а не «нажмите здесь».

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

04Чего обычно не хватает

После «быстрых правок» остаются более глубокие моменты, которые часто упускают.

• Модальные окна, которые «ловят» фокус и не отпускают.
• Слайдеры без возможности остановить автопрокрутку.
• Иконки без текстового аналога — особенно мобильное меню-«бургер».
• Капчи без альтернативы для незрячих.
• Цвет как единственный способ передать смысл (красные ошибки, зелёные успехи без иконок и подписей).

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

05Чем проверить

Минимальный инструментарий, с которого стоит начать аудит:

• WAVE или axe DevTools — браузерные расширения, которые подсвечивают ошибки прямо на странице.
• Lighthouse в Chrome — даёт оценку доступности и подсказывает критичные проблемы.
• Проверка с клавиатуры. Уберите мышь и попробуйте пройти типичный путь: открыть меню, заполнить форму заявки, оформить заказ.
• Скринридер. Бесплатный NVDA для Windows или встроенный VoiceOver на macOS дают понять, как сайт «звучит» для незрячего пользователя.

Автоматические сканеры ловят примерно треть проблем доступности. Остальное видно только при ручной проверке.

06Когда заниматься доступностью самому, а когда звать команду

Часть правок реально сделать своими силами: подписать картинки, поправить контрасты в теме, проверить формы. Если же сайт сложный, на нём много кастомных компонентов, корзина с динамикой и личный кабинет — самостоятельные попытки часто ломают вёрстку или ухудшают SEO. В этом случае логичнее заложить доступность в плановую разработку или редизайн сайта и идти по приоритетам: сначала шаблоны, потом ключевые сценарии (заявка, оформление заказа), потом всё остальное.

Официальная документация по теме — Справка Яндекс.Вебмастера.