Веб-доступность: как сделать сайт удобным для людей с ограниченными возможностями

Веб-доступность — это практика разработки сайтов, которыми могут пользоваться все люди, включая тех, у кого есть нарушения зрения, слуха, моторики или когнитивных функций. По данным ВОЗ, более 1,3 миллиарда человек в мире живут с той или иной формой инвалидности, и большинство из них используют интернет ежедневно.

Стандарты WCAG и законодательные требования

Основной международный стандарт веб-доступности — WCAG (Web Content Accessibility Guidelines), разработанный консорциумом W3C. Актуальная версия WCAG 2.1 определяет три уровня соответствия: A (базовый), AA (рекомендуемый для большинства сайтов) и AAA (максимальный).

WCAG строится на четырёх принципах:

• Воспринимаемость — информация должна быть представлена так, чтобы пользователи могли её воспринять (альтернативный текст для изображений, субтитры для видео).
• Управляемость — все элементы интерфейса должны быть доступны через клавиатуру, а времени на действия достаточно.
• Понятность — контент и навигация должны быть предсказуемыми и логичными.
• Надёжность — сайт должен корректно работать с вспомогательными технологиями (скринридерами, программами экранной лупы).

В США действует закон ADA, требующий доступности для коммерческих сайтов. В Европе — директива European Accessibility Act (EAA), обязывающая соответствие WCAG 2.1 AA с 2025 года. В России доступность обязательна для государственных сайтов согласно ГОСТ Р 52872-2019, а коммерческие компании внедряют стандарты добровольно или по отраслевым требованиям.

Навигация с клавиатуры и скринридеры

Люди с нарушениями моторики или полной слепотой не используют мышь — они перемещаются по сайту через клавишу Tab и активируют элементы через Enter или Space. Каждая интерактивная кнопка, ссылка или форма должны быть доступны в этой последовательности.

Проверьте:

• Все ссылки, кнопки и поля формы получают фокус при нажатии Tab.
• Порядок фокуса логичен и совпадает с визуальной структурой страницы (меняется через атрибут tabindex, но лучше полагаться на естественный порядок в HTML).
• Видимая рамка фокуса не скрыта через CSS — это ориентир для пользователя.
• Модальные окна блокируют фокус внутри себя, пока открыты, и возвращают его на кнопку-триггер при закрытии.

Скринридеры (JAWS, NVDA, VoiceOver) озвучивают содержимое страницы. Для них критична семантическая вёрстка: используйте правильные HTML-теги (<button> вместо <div onclick>), прописывайте alt для картинок, aria-label для иконок без текста и aria-live для динамически обновляемых областей. Заголовки <h1>–<h6> создают структуру документа, по которой скринридеры позволяют быстро перемещаться.

Контрастность, шрифты и альтернативный текст

Для людей со слабым зрением или дальтонизмом критична контрастность текста относительно фона. WCAG 2.1 AA требует коэффициент контрастности минимум 4,5:1 для обычного текста и 3:1 для крупного (от 18pt обычного или 14pt жирного).

Проверить контрастность можно через расширения браузера (например, WAVE) или онлайн-калькуляторы вроде WebAIM Contrast Checker. Избегайте светло-серого текста на белом фоне (#999 на #FFF даёт коэффициент 2,8:1 — недостаточно).

Требования к шрифтам:

• Минимальный размер основного текста — 16px (1rem).
• Межстрочный интервал (line-height) — не менее 1,5 для абзацев.
• Возможность увеличения текста до 200% без потери функциональности (проверяется зумом браузера).
• Избегайте выравнивания по ширине — неравномерные пробелы затрудняют чтение для людей с дислексией.

Альтернативный текст (alt) для изображений — обязателен. Для информативных картинок описывайте суть («график роста продаж за 2024 год»), для декоративных оставляйте атрибут пустым (alt=""), чтобы скринридер их игнорировал. Для сложных диаграмм добавляйте текстовое описание рядом или ссылку на подробную версию.

Инструменты для проверки доступности

Автоматические инструменты выявляют до 30–40% проблем, но не заменяют ручного тестирования и проверки с реальными пользователями. Тем не менее они существенно ускоряют аудит.

Для ручной проверки протестируйте навигацию только с клавиатуры (отключите мышь), включите скринридер (VoiceOver на macOS, NVDA на Windows — оба бесплатны) и пройдитесь по основным сценариям: заполнение формы, добавление товара в корзину, чтение статьи.

Простые улучшения с большим эффектом

Вы можете значительно повысить доступность сайта, внедрив несколько базовых практик, которые не требуют глубокой переработки кода.

1. Добавьте alt-атрибуты ко всем изображениям. Это займёт 10 минут, но сделает контент доступным для скринридеров. Для CMS вроде WordPress можно использовать плагины автопроверки (например, Accessibility Checker).
2. Увеличьте размер кликабельных областей. WCAG рекомендует минимум 44×44 пикселя для кнопок и ссылок — это помогает людям с тремором рук или тем, кто пользуется сайтом на смартфоне.
3. Используйте подписи для полей формы через <label>. Привяжите <label for="email"> к <input id="email"> — скринридер озвучит назначение поля, а клик по подписи активирует поле.
4. Дайте пользователям контроль над медиа. Видео не должно автоматически включать звук, для аудио и видео добавляйте паузу, перемотку и субтитры (есть сервисы автогенерации вроде YouTube или Rev.com).
5. Не полагайтесь только на цвет. Если ошибка в форме выделена красным, добавьте иконку или текстовое пояснение — дальтоники могут не различить оттенок.
6. Пропишите язык страницы через <html lang="ru">. Это помогает скринридерам правильно произносить текст и выбирать нужный голос.

Эти изменения легко внедрить за один спринт, но они покрывают большую часть частых проблем, с которыми сталкиваются пользователи с ограниченными возможностями. По исследованию WebAIM, 97% главных страниц популярных сайтов содержат автоматически обнаруживаемые ошибки доступности — у вас есть шанс выделиться на фоне конкурентов и охватить аудиторию, которую они игнорируют.

Частые вопросы