Доступность: основные принципы

Web accessibility (a11y) — набор практик, обеспечивающих использование веб-сайтов людьми с ограниченными возможностями: незрячими, слабовидящими, с двигательными и когнитивными нарушениями.

Зачем нужно

Около 15–20% населения имеет какое-либо ограничение. Доступный сайт охватывает всю аудиторию, а не только тех, кто использует мышь и имеет нормальное зрение. Стандарт WCAG 2.1 (Web Content Accessibility Guidelines) является обязательным требованием для государственных и корпоративных сайтов во многих странах. Хорошая a11y — это также хорошая SEO, UX и качество кода.

Где используется

  • Все публичные веб-страницы
  • UI-компоненты (кнопки, формы, диалоги, меню)
  • Мобильные веб-приложения
  • Документация и контентные сайты

Четыре принципа WCAG (POUR)

Принцип Суть
Perceivable (Воспринимаемость) Контент воспринимается хотя бы одним органом чувств
Operable (Управляемость) Все функции доступны с клавиатуры
Understandable (Понятность) Контент и UI понятны пользователю
Robust (Надёжность) Контент интерпретируется разными вспомогательными технологиями

Ключевые практики в HTML

1. Семантическая разметка

<!-- Правильно: браузер и AT понимают роль -->
<button onclick="openMenu">Меню</button>
<nav aria-label="Основная">...</nav>
<main>...</main>

<!-- Плохо: нет роли, нет фокуса -->
<div onclick="openMenu">Меню</div>

2. Альтернативный текст

<img src="chart.png" alt="График роста продаж на 40% в 2025 году">
<img src="decorative.svg" alt=""> <!-- декор — пустой alt -->

3. Метки для полей формы

<label for="email">Электронная почта</label>
<input type="email" id="email" name="email" required autocomplete="email">

4. Управление фокусом

<!-- Skip link — первый элемент страницы -->
<a href="#main" class="skip-link">Перейти к содержимому</a>

<!-- Видимый focus-visible стиль -->

:focus-visible {
  outline: 2px solid #1a73e8;
  outline-offset: 2px;
}

5. ARIA — только там, где семантики HTML недостаточно

<!-- Кастомное поле со списком -->
<div role="combobox"
     aria-expanded="false"
     aria-haspopup="listbox"
     aria-labelledby="country-label">
  ...
</div>

<!-- Живая область (обновляется динамически) -->
<div aria-live="polite" aria-atomic="true" id="status">
  <!-- Сообщения об успехе/ошибке обновляются JS -->
</div>

6. Контраст текста

WCAG AA: минимум 4.5:1 для обычного текста, 3:1 для крупного. Подробнее — Контраст и читаемость.

7. Субтитры и транскрипты

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track kind="subtitles" src="sub-ru.vtt" srclang="ru" label="Русский" default>
</video>

Тестирование доступности

  • Tab-навигация: пройди всю страницу только Tab/Enter/Space
  • Screen reader: протестируй в NVDA (Windows), VoiceOver (macOS/iOS)
  • axe DevTools (расширение Chrome) — автоматический аудит
  • Lighthouse в DevTools — вкладка Accessibility

Частые ошибки

Ошибка Почему плохо Как правильно
<div> как кнопка без role и tabindex Не фокусируется с клавиатуры Используй <button>
Нет alt на <img> Screen reader не знает, что показано Всегда добавляй alt
outline: none без замены Пользователь клавиатуры теряет фокус Стилизуй :focus-visible
Низкий контраст текста Нечитаемо при нарушении зрения Минимум 4.5:1
Только цвет как единственный сигнал Недоступно для дальтоников Добавляй иконки, текст, форму

Связанные темы

Ресурсы