Доступность интерфейса (a11y) — это свойство сайта или приложения быть usable для людей с ограничениями: слабым зрением, дальтонизмом, моторными нарушениями. Стандарт — WCAG 2.1 с тремя уровнями соответствия: A (минимум), AA (рыночный стандарт), AAA (максимальный). Базовые требования — контраст 4.5:1, управление с клавиатуры, alt-тексты, семантическая разметка. На практике это даёт прирост SEO и конверсии на 5–15%.
Что такое доступность и зачем она нужна
Доступность (accessibility, a11y) — это не «фича для инвалидов». Это свойство интерфейса быть удобным для всех, у кого взаимодействие затруднено:
- постоянно — слепота, глухота, моторные нарушения, когнитивные особенности;
- временно — сломанная рука, конъюнктивит, мигрень;
- ситуативно — яркий солнечный свет, шум в метро, занятые руки.
В сумме это 20–30% аудитории в любой момент. Сайт, который игнорирует a11y, отрезает этих людей — и теряет конверсию.
Для бизнеса три причины заняться доступностью:
- Расширение аудитории. 15% людей с постоянными ограничениями — это реальные деньги, особенно в нишах здравоохранения, финансов, образования.
- SEO. Поисковые системы читают разметку так же, как скринридеры. Семантическая вёрстка, alt-тексты, логичная структура — это плюс к ранжированию.
- Закон. В РФ госсайты обязаны соответствовать доступности. В США и ЕС требования распространяются на коммерческие проекты — исков по ADA много, и они дорогие.
WCAG 2.1: стандарт и уровни
WCAG (Web Content Accessibility Guidelines) — международный стандарт W3C. Сейчас актуальна версия 2.1, на подходе 2.2. WCAG построен на четырёх принципах POUR:
- Perceivable (воспринимаемый) — контент видят и слышат все пользователи.
- Operable (управляемый) — интерфейс работает с клавиатуры и другими устройствами.
- Understandable (понятный) — язык и логика понятны.
- Robust (надёжный) — работает с разными браузерами и вспомогательными технологиями.
Три уровня соответствия:
| Уровень | Что даёт | Когда достаточно |
|---|---|---|
| A | Минимум: alt-тексты, базовая разметка | Не достаточно для коммерческого продукта |
| AA | Рыночный стандарт: контраст 4.5:1, фокус-стили, масштабируемость | Большинство коммерческих сайтов |
| AAA | Максимальный: контраст 7:1, упрощённый язык | Специфические проекты (медицина, госсектор) |
Цель для коммерческого продукта — WCAG 2.1 уровня AA. Это баланс между усилиями и охватом.
Контраст: главное правило читаемости
Самая частая и простая проблема — недостаточный контраст текста и фона. WCAG требует:
| Тип контента | Минимум для AA | Минимум для AAA |
|---|---|---|
| Основной текст (до 24 px) | 4.5:1 | 7:1 |
| Крупный текст (от 24 px или 18.66 px bold) | 3:1 | 4.5:1 |
| Элементы интерфейса (иконки, границы) | 3:1 | Нет требования |
Типичные проблемные места:
- серый текст (#999) на белом — контраст 2.8:1, не проходит AA;
- белый текст на жёлтом фоне — выглядит ярко, но контраст 1.07:1; -Placeholder в поле ввода — часто слишком светлый, не виден при плохом зрении.
Проверяйте контраст плагином Stark в Figma или сервисом WebAIM Contrast Checker. Исправление занимает 5 минут на цвет.
Клавиатурная навигация и фокус-стили
Пользователи с моторными нарушениями и слепотой работают с сайтом только с клавиатуры — через Tab, Shift+Tab, Enter, Space. Для них критично:
- Логичный порядок табуляции. Фокус должен идти по смыслу — слева направо, сверху вниз.
- Видимый фокус-стиль. Когда пользователь переходит Tab к элементу, должно быть видно, где он. Стандартный браузерный контур (outline) — минимально.
- Никаких клавиатурных ловушек. Если пользователь попал в модалку или меню, должен быть способ выйти оттуда клавишей Esc.
Распространённая ошибка — убирать outline: none «для красоты» и не заменять ничем. После этого сайт становится непригодным для клавиатурных пользователей. Заменяйте на свой стиль фокуса, не убирайте совсем.
Скринридеры и семантическая разметка
Скринридер (NVDA, JAWS, VoiceOver, Orca) читает страницу вслух. Он читает не визуал, а разметку — поэтому семантика важнее внешнего вида.
| Элемент | Правильно | Неправильно |
|---|---|---|
| Заголовок | <h1>, <h2>, <h3> | <div class="title"> |
| Ссылка | <a href> | <span onclick> |
| Кнопка | <button> | <div class="btn"> |
| Список | <ul>, <ol>, <li> | <div> с · |
| Форма | <label> связан с input | <div> рядом с input |
Без семантической разметки скринридер читает страницу как сплошной поток текста — без структуры, без возможности перепрыгнуть к нужному разделу.
ARIA-атрибуты
Когда семантики не хватает, помогают ARIA-атрибуты:
aria-label— подпись для элемента без видимого текста (например, иконка-кнопка);aria-describedby— расширенное описание поля;role— роль элемента, если она не очевидна из тега.
Главное правило ARIA — «первое правило ARIA: не используй ARIA». Если можно использовать семантический HTML-тег — используй его, не навешивай ARIA-костыли.
Картинки и медиа
| Тип медиа | Что нужно |
|---|---|
| Информационная картинка | alt с описанием |
| Декоративная картинка | Пустой alt="" — скринридер пропустит |
| Иконка-кнопка | aria-label или скрытый текст |
| Видео | Субтитры, расшифровка |
| Аудио | Текстовая расшифровка |
Alt-текст — это не «для галочки». Он описывает, что на картинке, для того, кто не видит. «Фото команды» — плохо, «Команда из 5 человек в офисе за столом для переговоров» — хорошо.
Чек-лист проверки интерфейса на доступность
- Контраст основного текста — минимум 4.5:1 на всех экранах.
- Контраст элементов интерфейса (границы, иконки) — минимум 3:1.
- Все интерактивные элементы доступны с клавиатуры (Tab, Enter, Esc).
- Видимый фокус-стиль на каждом интерактивном элементе.
- Заголовки размечены семантически (h1 → h2 → h3), без пропусков уровней.
- У всех картинок есть alt (для декоративных — пустой).
- Формы имеют подписи (
<label>), ошибки понятны и связаны с полем. - Сайт масштабируется до 200% без потери функциональности.
- Не используется только цвет для передачи смысла (статусы подписываем текстом или иконкой).
- Видео имеют субтитры или расшифровку.
Проверка этого чек-листа закрывает 80% требований WCAG AA и занимает 2–4 часа на средний сайт.
Инструменты автоматической проверки
Полностью автоматизировать a11y нельзя — часть проверок требует человеческого глаза. Но базовые проблемы ловят инструменты:
- axe DevTools — расширение для Chrome, проверяет страницу за секунды.
- Lighthouse — встроенная в Chrome проверка, включая раздел Accessibility.
- WAVE — сервис webaim.org, визуализирует проблемы прямо на странице.
- Stark — плагин Figma, проверяет контраст и симулирует дальтонизм на этапе дизайна.
Автоматика находит 30–40% проблем. Остальные 60–70% — это ручная проверка клавиатурной навигации и тестирование со скринридером.
Доступность — это не благотворительность и не «дополнительная фича». Это требование к качеству интерфейса, которое расширяет аудиторию, улучшает SEO и снижает юридические риски. Базовые правки стоят недорого, а приносят конверсию и репутацию. Начните с чек-листа — он закрывает большую часть проблем за неделю работы.
Комментарии · 0