Что такое доступность сайтов (accessibility) и стандарт WCAG
Основы4 минРедакция Innovialabs
Коротко
Доступность — это свойство сайта, которым могут пользоваться все, включая людей с нарушениями зрения, слуха и моторики; WCAG — международный стандарт с конкретными критериями, и ориентиром обычно служит уровень AA.
Коротко: что такое доступность
Доступность сайта (accessibility, a11y) — это когда интерфейсом можно пользоваться независимо от ограничений: без мыши, без зрения, со слабым слухом, с дрожащими руками или в условиях яркого солнца на экране телефона.
WCAG (Web Content Accessibility Guidelines) — международный стандарт от консорциума W3C. Он описывает проверяемые критерии: какой должен быть контраст текста, как работать с клавиатурой, что делать с видео и формами. Стандарт развивается по версиям 2.0, 2.1, 2.2, и каждая следующая дополняет предыдущую.
Кому нужна доступность
Чаще всего думают только о незрячих пользователях, но круг гораздо шире:
- Люди с нарушениями зрения — пользуются экранными дикторами (screen readers), увеличением, высококонтрастными темами.
- Люди с нарушениями слуха — им нужны субтитры и текстовые расшифровки.
- Люди с моторными ограничениями — управляют сайтом только с клавиатуры, голосом или специальными устройствами.
- Люди с когнитивными особенностями — им важны простой язык, предсказуемая навигация и отсутствие отвлекающей анимации.
- Временные и ситуативные ограничения — сломанная рука, ребёнок на руках, шумная улица, медленный интернет.
- Пожилые пользователи — у них часто сочетаются несколько факторов сразу.
Отсюда главный вывод: доступный интерфейс удобнее для всех, а не только для отдельной группы.
Четыре принципа POUR
Все критерии WCAG сгруппированы вокруг четырёх принципов:
| Принцип | Смысл | Примеры |
|---|---|---|
| Perceivable (воспринимаемость) | Информацию можно воспринять хотя бы одним органом чувств | Alt-текст у изображений, субтитры, достаточный контраст |
| Operable (управляемость) | Интерфейсом можно управлять разными способами | Работа с клавиатуры, достаточно времени на действия, нет мигания |
| Understandable (понятность) | Содержимое и поведение предсказуемы | Понятные ошибки в формах, указан язык страницы, единая навигация |
| Robust (надёжность) | Сайт корректно работает с вспомогательными технологиями | Валидная разметка, правильные роли и названия элементов |
Уровни соответствия A, AA и AAA
Каждый критерий WCAG относится к одному из трёх уровней:
- A — базовый минимум. Без него часть пользователей вообще не сможет пользоваться сайтом. Пример: у изображений есть текстовая альтернатива.
- AA — рабочий стандарт. Именно его чаще всего указывают в законах, тендерах и корпоративных требованиях. Пример: контраст обычного текста не ниже 4.5:1.
- AAA — максимальный уровень. Для всего сайта целиком его обычно не требуют, потому что некоторые критерии невыполнимы для любого контента. Пример: контраст не ниже 7:1.
Уровни накопительные: чтобы соответствовать AA, нужно выполнить все критерии A и AA.
Почему это важно бизнесу
- Больше клиентов. Если человек не может оформить заказ с клавиатуры или прочитать бледный текст, он уходит к конкуренту.
- Юридические требования. Во многих странах доступность цифровых сервисов закреплена законом — особенно для госсектора, банков, транспорта и интернет-магазинов. Если вы работаете с зарубежными рынками или крупными заказчиками, требование соответствия WCAG AA может появиться в договоре.
- SEO и качество кода. Семантическая разметка, alt-тексты и понятные заголовки помогают и поисковым системам, и AI-поиску лучше понимать страницу.
- Удобство для всех. Хороший контраст, крупные кнопки и понятные формы снижают число ошибок у любых пользователей.
- Дешевле заложить сразу. Исправлять доступность в готовом продукте обычно дороже, чем учесть её в дизайне и вёрстке.
С чего начать
- Пройдите ключевые сценарии сайта только клавиатурой: Tab, Shift+Tab, Enter, пробел, Esc.
- Проверьте контраст текста и кнопок любым контраст-чекером.
- Запустите автоматический аудит — например, Lighthouse или axe. Он найдёт часть проблем, но не все.
- Послушайте сайт экранным диктором: VoiceOver на macOS и iOS, NVDA на Windows, TalkBack на Android.
- Добавьте проверки доступности в дизайн-ревью и чек-лист приёмки задач.
Официальный текст стандарта и краткие справочники по критериям опубликованы на сайте W3C WAI.
Частые заблуждения
- «У нас нет таких пользователей» — вы просто не видите их в аналитике, потому что они не смогли пользоваться сайтом.
- «Достаточно поставить виджет доступности» — оверлеи не исправляют проблемы в коде и иногда мешают вспомогательным технологиям.
- «Доступный сайт — некрасивый» — WCAG не запрещает яркий дизайн, он требует читаемости и управляемости.