Дунин-Барковский Бюро

Доступность как стандарт: как сделать сайт удобным для всех

2026-01-08 12:14
В цифровом мире каждый имеет право на равный доступ к информации и сервисам. Однако миллионы людей сталкиваются с барьерами при использовании сайтов из‑за нарушений зрения, слуха, моторики или когнитивных особенностей. Доступность (accessibility) — не опция, а этическая и юридическая обязанность разработчиков.

Почему доступность важна?

  • Социальная ответственность: ~15 % населения мира имеют инвалидность (данные ВОЗ).
  • Юридическая защищённость: во многих странах (США, ЕС, РФ) действуют законы о цифровой доступности (ADA, EN 301 549, ГОСТ Р 52872‑2019).
  • Бизнес‑выгода:
  • расширение аудитории;
  • снижение юридических рисков;
  • улучшение SEO (доступный код лучше индексируется);
  • повышение лояльности пользователей.

Основные стандарты: WCAG 2.1

WCAG (Web Content Accessibility Guidelines) — международный стандарт, разработанный W3C. Ключевые принципы (POUR):

  1. Perceivable (Воспринимаемость)
  2. Контент должен быть доступен для восприятия через разные каналы.
  3. Operable (Управляемость)
  4. Интерфейс должен работать с разными способами ввода.
  5. Understandable (Понятность)
  6. Язык и поведение интерфейса должны быть предсказуемыми.
  7. Robust (Надёжность)
  8. Код должен корректно интерпретироваться вспомогательными технологиями.

Уровни соответствия:

  • A (базовый) — обязательные требования;
  • AA (рекомендуемый) — оптимальный баланс;
  • AAA (максимальный) — для специализированных ресурсов.

Ключевые технические требования

1. Контрастность цветов

  • Минимальный коэффициент контрастности: 4,5 : 1 для текста обычного размера.
  • Для крупного текста (≥ 18 pt или ≥ 14 pt полужирный): 3 : 1.
  • Инструменты проверки:
  • WebAIM Contrast Checker;
  • Chrome DevTools (вкладка «Accessibility»);
  • плагин Color Contrast Analyzer.

Пример корректного сочетания:


body {
color: #212121; /* Тёмный серый */
background: #FFFFFF; /* Белый */
/* Контраст: 15,8 : 1 */
}


2. Навигация с клавиатуры

  • Все интерактивные элементы должны получать фокус (<button>, <a>, <input>, <select>).
  • Визуальная индикация фокуса (например, синяя обводка).
  • Логичный порядок табуляции (слева направо, сверху вниз).
  • Поддержка «горячих» клавиш (например, Esc для закрытия модального окна).

Проверка: нажмите Tab и убедитесь, что:

  • каждый элемент подсвечивается;
  • нет «ловушек» фокуса;
  • можно закрыть все всплывающие элементы.

3. ARIA‑метки (WAI‑ARIA)

ARIA‑атрибуты помогают скринридерам понимать сложные компоненты:

  • aria-label — скрытая подпись для иконок:


<button aria-label="Закрыть окно">×</button>


  • aria-labelledby — связь элемента с видимой меткой:


<label id="search-label">Поиск</label>
<input aria-labelledby="search-label" type="search">


  • aria-describedby — дополнительное описание:


<input aria-describedby="hint" type="password">
<span id="hint">Минимум 8 символов</span>


  • role — определение типа компонента:


<div role="alert" aria-live="assertive">Ошибка!</div>


Важно: используйте ARIA только там, где недостаточно стандартных HTML‑элементов.

4. Альтернативный текст для изображений

  • Для декоративных изображений: alt="" (пустая строка).
  • Для информативных: краткое описание сути:


<img src="chart.png" alt="График роста продаж за 2025 год">


  • Для кнопок‑иконок: alt или aria-label.

5. Подписи для мультимедиа

  • Видео: субтитры (<track>) и описания для слабовидящих.
  • Аудио: текстовая расшифровка.
  • Управляющие элементы: понятные подписи (например, «Включить звук»).

Практические шаги по внедрению

Аудит текущего сайта

  • Проверьте контрастность (Wave, Axe).
  • Протестируйте навигацию клавиатурой.
  • Запустите скринридер (NVDA, VoiceOver).

Исправление критических ошибок

  • Добавьте alt-тексты.
  • Обеспечьте контрастность.
  • Настройте фокус для интерактивных элементов.

Разработка доступных компонентов

  • Используйте семантический HTML (<nav>, <article>, <aside>).
  • Избегайте <div> вместо кнопок — лучше <button>.
  • Для кастомных элементов применяйте ARIA.

Тестирование с реальными пользователями

  • Привлекайте людей с инвалидностью к юзабилити‑тестам.
  • Используйте эмуляторы нарушений (например, в Chrome DevTools).

Документация и обучение

  • Создайте гайдлайн по доступности для команды.
  • Проводите тренинги для разработчиков и дизайнеров.

Распространённые ошибки

  • Недоступные формы: отсутствие подписей для полей.
  • Скрытые элементы: контент, невидимый для скринридеров (display: none).
  • Неинформативные ссылки: «читать далее», «кликните здесь».
  • Динамический контент без оповещений: новые сообщения без aria-live.
  • Жёсткие тайм‑ауты: недостаточно времени для заполнения форм.

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

  • Автоматизированные:
  • Axe (браузерное расширение);
  • Lighthouse (в Chrome DevTools);
  • WAVE (webaim.org).
  • Ручные:
  • Скринридеры: NVDA (Windows), VoiceOver (macOS/iOS), Orca (Linux).
  • Эмуляторы цветослепоты: Color Oracle.
  • Для разработчиков:
  • ESLint‑плагины для проверки ARIA;
  • Storybook с аддонами доступности.

Заключение

Доступность — это не «доработка», а фундаментальный принцип проектирования. Внедряя WCAG‑рекомендации, вы:

  • делаете интернет инклюзивным;
  • снижаете риски судебных исков;
  • улучшаете пользовательский опыт для всех (например, контрастные цвета удобны и для пожилых людей).

Начните сегодня:

  1. Проверьте контрастность ключевых элементов.
  2. Убедитесь, что сайт работает с клавиатурой.
  3. Добавьте alt-тексты к изображениям.
  4. Протестируйте скринридером хотя бы одну страницу.

Доступность — не цель, а непрерывный процесс. Каждый шаг в этом направлении делает цифровой мир лучше для всех.