Доступность сайта (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% проблем:

1. Добавьте alt ко всем информативным изображениям
2. Проверьте контраст текста (минимум 4.5:1)
3. Убедитесь, что все кнопки и ссылки доступны с клавиатуры
4. Свяжите label с полями форм
5. Добавьте язык страницы (lang=»ru» на html)

Доступность и SEO

Доступный сайт — лучше для SEO. Семантический HTML помогает поисковикам понимать структуру. Alt-тексты индексируются. Быстрая загрузка (следствие оптимизации для доступности) — фактор ранжирования. Внедряя доступность, вы одновременно улучшаете SEO.

Хотите сделать сайт доступным? Свяжитесь с нами — проведём аудит и внедрим улучшения при разработке.