Доступность сайта (a11y): стандарты и внедрение
Что такое доступность сайта
Доступность (accessibility, a11y) — это проектирование сайта так, чтобы им могли пользоваться все люди, включая тех, кто имеет ограничения зрения, слуха, моторики или когнитивных функций. По статистике ВОЗ, 16% населения имеют инвалидность. Игнорировать доступность — терять каждого шестого потенциального клиента.
Доступность — это не только этика, но и бизнес: доступные сайты лучше индексируются, быстрее загружаются и удобнее для всех пользователей, включая тех, кто работает без мыши или с медленным интернетом.
Стандарты доступности
WCAG 2.1
Web Content Accessibility Guidelines — международный стандарт доступности. Три уровня: A (минимум), AA (рекомендуемый), AAA (максимум). Для коммерческих сайтов рекомендуется уровень AA.
Четыре принципа WCAG
- Воспринимаемость — информация доступна всем органам чувств
- Управляемость — интерфейс управляется клавиатурой и другими устройствами
- Понятность — контент и интерфейс понятны
- Надёжность — контент работает с разными технологиями, включая скринридеры
Практические рекомендации
Контраст текста
Минимальный коэффициент контраста: 4.5:1 для обычного текста, 3:1 для крупного (18px bold+). Проверяйте через WebAIM Contrast Checker. Подробнее о цвете и типографике.
Альтернативный текст изображений
Каждая информативная фотография и иллюстрация должна иметь атрибут alt с описанием содержимого. Декоративные изображения: alt=»» (пустой). Скринридер прочитает alt вслух для незрячих пользователей.
Навигация с клавиатуры
Каждый интерактивный элемент (ссылка, кнопка, поле формы) должен быть доступен через Tab. Фокус должен быть виден (outline). Порядок фокуса логичен (сверху вниз, слева направо). Подробнее о навигации.
Семантический HTML
Используйте правильные теги: h1-h6 для заголовков, nav для навигации, main для основного контента, button для кнопок. Скринридеры используют семантику для понимания структуры страницы.
Формы
Каждое поле связано с label через for/id. Ошибки валидации описаны текстом, а не только цветом (красным). Обязательные поля отмечены не только звёздочкой, но и текстом «обязательное». О дизайне форм подробнее.
Медиа-контент
Видео: субтитры для глухих. Аудио: текстовая расшифровка. Анимации: уважайте prefers-reduced-motion — пользователи с вестибулярными нарушениями отключают анимации.
Инструменты проверки доступности
- Lighthouse (Chrome DevTools) — автоматическая проверка, оценка 0–100
- axe DevTools — расширение Chrome, находит ошибки прямо на странице
- WAVE — визуальное наложение ошибок доступности на сайт
- Ручное тестирование — пройдите сайт только клавиатурой (без мыши). Если где-то застряли — проблема
- Скринридер — включите NVDA (Windows, бесплатный) и попробуйте пользоваться сайтом вслепую
Быстрые победы
Необязательно внедрять всё сразу. Начните с этих 5 пунктов — они покроют 80% проблем:
- Добавьте alt ко всем информативным изображениям
- Проверьте контраст текста (минимум 4.5:1)
- Убедитесь, что все кнопки и ссылки доступны с клавиатуры
- Свяжите label с полями форм
- Добавьте язык страницы (lang=»ru» на html)
Доступность и SEO
Доступный сайт — лучше для SEO. Семантический HTML помогает поисковикам понимать структуру. Alt-тексты индексируются. Быстрая загрузка (следствие оптимизации для доступности) — фактор ранжирования. Внедряя доступность, вы одновременно улучшаете SEO.
Хотите сделать сайт доступным? Свяжитесь с нами — проведём аудит и внедрим улучшения при разработке.
Доступность обязательна по закону?
В России 149-ФЗ и ГОСТ Р 52872-2019 требуют доступность для государственных сайтов. Для коммерческих — пока рекомендация. Но тренд на ужесточение: в ЕС и США штрафы за недоступные сайты уже реальность.
Сколько стоит внедрение доступности?
Аудит: от 30 000 ₽. Базовые исправления (контраст, alt, клавиатура): от 50 000 ₽. Полное соответствие WCAG AA: от 150 000 ₽ (зависит от размера сайта). Дешевле закладывать доступность при создании сайта, чем исправлять потом.
Доступность сделает сайт некрасивым?
Нет. Доступность и красота не противоречат друг другу. Apple, Google, Stripe — доступные и красивые. Ограничения контраста и размера текста — не ограничения дизайна, а принципы хорошего дизайна.