Доступность сайта (accessibility, a11y) в России — это и юридическое требование для определённых категорий организаций, и просто хорошая практика. Расскажем, что обязаны делать государственные и социальные сайты, и почему любой коммерческий проект от этого тоже выигрывает.
Что говорит закон
ФЗ-181 «О социальной защите инвалидов» обязывает государственные органы, медицинские, образовательные и социальные организации делать свои сайты доступными для людей с ограниченными возможностями. Конкретные требования — в ГОСТ Р 52872 и приказах Минцифры.
Для коммерческих сайтов прямого обязательства нет, но есть смежные требования: 152-ФЗ о ПДн косвенно требует, чтобы согласие давалось осознанно (а человек со скринридером тоже субъект данных). Постепенно требования расширяются.
В мире — WCAG 2.1 AA это стандарт. ЕС, США, Канада, Австралия требуют его у госсайтов и крупного бизнеса. Российские WCAG-совместимые сайты автоматически открывают экспортный рынок.
Кто пользуется a11y-функциями
Не только полностью слепые. Это люди с ослабленным зрением (увеличение контраста, шрифта), дальтоники (правильные цвета и иконки), люди с моторными нарушениями (полностью клавиатурная навигация), пожилые пользователи (всё вместе понемногу).
В России это около 11–13 миллионов человек по оценкам Росстата. Для крупных сервисов это 5–10% потенциальной аудитории. Терять её только потому, что разработчик не поставил alt — расточительство.
Семантическая разметка как основа
Базовый уровень a11y — правильная HTML-разметка. <button> для кнопок, <a> для ссылок, <nav> для навигации, <main> для основного контента, заголовки в иерархии H1 → H2 → H3 без пропусков.
Скринридер (Voice Over, NVDA, JAWS) использует эту структуру для навигации. Без неё пользователь идёт по странице через попытки и ругается. С ней — переключается между разделами одним клавишным сокращением.
В наших проектах правило: ни одного <div onclick>. Если что-то кликабельное — это <button> или <a>. Если выпадающее меню — <details> с <summary> или ARIA-паттерн с правильными атрибутами.
ARIA: когда HTML не хватает
Для сложных компонентов (комбобоксы, табы, диалоги, дроверы) HTML недостаточно. ARIA-атрибуты (aria-expanded, aria-controls, aria-live, role) дают скринридеру информацию о состоянии и связях.
Главное правило ARIA — «не используйте, если можно обойтись HTML». Кривое использование ARIA хуже отсутствия — пользователь получает ложную информацию о компоненте.
В нашем стеке Headless UI и Radix UI берут на себя сложные паттерны (Dialog, Combobox, Menu, Tabs) с правильными ARIA из коробки. Это снимает 80% рисков сделать a11y неправильно.
Цвета и контраст
WCAG AA требует контраст текста к фону минимум 4.5:1 для обычного текста, 3:1 для крупного. На практике это означает, что светло-серый текст на белом фоне (модный приём 2015 года) — недопустим.
Проверка: Chrome DevTools, Lighthouse, axe DevTools — все показывают проблемные места. На дизайн-этапе — Figma-плагины (Stark, A11y - Color Contrast Checker).
Цвет не должен быть единственным носителем информации. «Красные пункты — обязательные, зелёные — опциональные» — для дальтоника это одно и то же. Добавляйте иконки, текстовые метки, паттерны.
Клавиатурная навигация
Любая функциональность сайта должна быть доступна с клавиатуры: Tab по интерактивным элементам, Enter/Space для активации, Esc для закрытия модалок, стрелки для меню.
Видимый focus — обязателен. outline: none без замены — антипаттерн, ломающий навигацию для всех клавиатурных пользователей. В нашем стеке :focus-visible с цветной рамкой по бренду — стандарт.
«Skip to main content» — ссылка в начале страницы, скрытая до фокуса, перепрыгивающая длинное меню. Стандарт для крупных сайтов с многоуровневой навигацией.
Изображения и медиа
alt для содержательных изображений, описывающий смысл (не «фото», а «гендиректор Иванов на конференции»). Декоративные картинки — alt="" (пустая строка, не отсутствие атрибута).
Для видео — субтитры обязательны. Yandex и YouTube умеют автогенерацию, но качество слабое. Для важных видео (лендинг, продукт-tour) — субтитры от человека.
Аудиоконтент — текстовая расшифровка. Подкасты, интервью, голосовые сообщения — без расшифровки недоступны для глухих и людей с нарушениями слуха.
Формы
<label> для каждого поля, связанный через for или обёрнутый. Placeholder не заменяет label — он исчезает при фокусе. Ошибки описаны текстом, а не только цветом, объявляются в aria-live для скринридера.
Длинные формы разбивайте на шаги или секции. На каждом шаге фокус автоматически на первом поле. Это удобно всем, не только пользователям AT.
Тестирование a11y
axe-core плагин для Chrome, Lighthouse в DevTools, скринридер NVDA (бесплатно для Windows) — минимальный набор. На крупном проекте — автоматизированные тесты a11y в Playwright или Cypress на каждом PR.
Самое надёжное — ручное тестирование с реальным пользователем AT. Часовой обзор стоит 3–8 тысяч и находит проблемы, которые автоматика не видит.
Итого
A11y — это не дополнительная фича, а характеристика качества фронтенда. Семантический HTML, ARIA там, где нужно, контраст, клавиатура, alt и labels — базовый минимум. Для госсайтов и социалки — юридическое требование. Для коммерции — расширение аудитории и базовая профессиональная гигиена. Стоимость a11y-готовности на старте проекта — 5–10% бюджета. Стоимость переделки готового сайта — 30–50%.
Частые вопросы
Какие сайты в РФ обязаны быть доступными по закону?
ФЗ-181 «О социальной защите инвалидов» обязывает государственные органы, медицинские, образовательные и социальные организации делать свои сайты доступными для людей с ограниченными возможностями. Конкретные требования — в ГОСТ Р 52872 и приказах Минцифры. Для коммерческих сайтов прямого обязательства нет, но есть смежные требования: 152-ФЗ о ПДн косвенно требует, чтобы согласие давалось осознанно. В мире WCAG 2.1 AA это стандарт. ЕС, США, Канада, Австралия требуют его у госсайтов и крупного бизнеса.
Кто пользуется a11y-функциями на сайте?
Не только полностью слепые. Это люди с ослабленным зрением (увеличение контраста, шрифта), дальтоники (правильные цвета и иконки), люди с моторными нарушениями (полностью клавиатурная навигация), пожилые пользователи (всё вместе понемногу). В России это около 11–13 миллионов человек по оценкам Росстата. Для крупных сервисов это 5–10% потенциальной аудитории. Терять её только потому, что разработчик не поставил alt — расточительство.
Что такое семантическая разметка для a11y?
Базовый уровень a11y — правильная HTML-разметка. Button для кнопок, a для ссылок, nav для навигации, main для основного контента, заголовки в иерархии H1 → H2 → H3 без пропусков. Скринридер (Voice Over, NVDA, JAWS) использует эту структуру для навигации. Без неё пользователь идёт по странице через попытки и ругается. С ней — переключается между разделами одним клавишным сокращением. Правило: ни одного div onclick. Если кликабельное — это button или a.
Когда нужно использовать ARIA-атрибуты?
Для сложных компонентов (комбобоксы, табы, диалоги, дроверы) HTML недостаточно. ARIA-атрибуты (aria-expanded, aria-controls, aria-live, role) дают скринридеру информацию о состоянии и связях. Главное правило ARIA — «не используйте, если можно обойтись HTML». Кривое использование ARIA хуже отсутствия — пользователь получает ложную информацию о компоненте. В нашем стеке Headless UI и Radix UI берут на себя сложные паттерны (Dialog, Combobox, Menu, Tabs) с правильными ARIA из коробки.
Какой контраст текста требуется по WCAG?
WCAG AA требует контраст текста к фону минимум 4.5:1 для обычного текста, 3:1 для крупного. На практике это означает, что светло-серый текст на белом фоне (модный приём 2015 года) — недопустим. Проверка: Chrome DevTools, Lighthouse, axe DevTools — все показывают проблемные места. На дизайн-этапе — Figma-плагины (Stark, A11y Color Contrast Checker). Цвет не должен быть единственным носителем информации: добавляйте иконки, текстовые метки, паттерны.
Как обеспечить клавиатурную навигацию на сайте?
Любая функциональность сайта должна быть доступна с клавиатуры: Tab по интерактивным элементам, Enter/Space для активации, Esc для закрытия модалок, стрелки для меню. Видимый focus обязателен. Outline: none без замены — антипаттерн, ломающий навигацию для всех клавиатурных пользователей. В нашем стеке :focus-visible с цветной рамкой по бренду — стандарт. «Skip to main content» — ссылка в начале страницы, скрытая до фокуса, перепрыгивающая длинное меню. Стандарт для крупных сайтов.