Веб-доступность: практическое руководство по WCAG для разработчиков

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

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

• Законодательство: ADA, EU Accessibility Act и подобные законы требуют доступных сайтов
• Аудитория: ~15% мирового населения имеют ту или иную форму инвалидности
• SEO: доступный HTML = семантический HTML, который поисковики понимают лучше
• UX для всех: субтитры полезны в шумном окружении, клавиатурная навигация — для опытных пользователей

Принципы WCAG: POUR

Воспринимаемость (Perceivable)

• Изображения имеют alt с описанием
• Видео имеют субтитры и транскрипцию
• Цвет — не единственный способ передачи информации
• Достаточный контраст текста (4.5:1 для обычного, 3:1 для крупного)

Управляемость (Operable)

• Вся функциональность доступна с клавиатуры
• Достаточно времени для чтения и взаимодействия
• Контент не вызывает судорог (нет мигания >3 раз/сек)

Понятность (Understandable)

• Текст читаем и предсказуем
• Страницы ведут себя предсказуемо
• Пользователи могут избежать и исправить ошибки

Надёжность (Robust)

• Валидный HTML для ассистивных технологий
• ARIA-атрибуты используются корректно

Практическая реализация

Семантический HTML

<!-- Плохо -->
<div class="nav">
  <div onclick="...">Главная</div>
</div>

<!-- Хорошо -->
<nav aria-label="Основная навигация">
  <a href="/">Главная</a>
</nav>

Alt-текст изображений

<!-- Декоративное -->
<img src="border.png" alt="" role="presentation">

<!-- Информативное -->
<img src="chart.png" alt="Продажи выросли на 45% в Q3">

<!-- Функциональное -->
<button><img src="search.svg" alt="Поиск"></button>

Клавиатурная навигация

• Все интерактивные элементы доступны через Tab
• Порядок фокуса совпадает с визуальным
• Видимый индикатор фокуса (никогда outline: none без замены)
• Escape закрывает модальные окна

Формы

<label for="email">Email</label>
<input type="email" id="email" required aria-describedby="email-help">
<span id="email-help">Мы никогда не передадим ваш email</span>

<input type="email" aria-invalid="true" aria-errormessage="email-error">
<span id="email-error" role="alert">Введите корректный email</span>

Контраст

• Обычный текст (<18px): минимум 4.5:1
• Крупный текст (≥18px bold или ≥24px): минимум 3:1
• UI-компоненты: минимум 3:1

ARIA

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

• role — что это? (tab, dialog, alert)
• aria-label — доступное имя
• aria-expanded — раскрыт ли элемент?
• aria-live — анонсировать динамические обновления

Первое правило ARIA: если можно использовать нативный HTML — используйте его.

Инструменты тестирования

• Lighthouse: встроен в Chrome DevTools
• axe DevTools: расширение для детального тестирования
• WAVE: инструмент оценки доступности
• Скринридеры: VoiceOver (Mac), NVDA (Windows), JAWS
• Клавиатура: отключите мышь и пройдите по сайту

Заключение

Доступность — не доработка, а фундаментальное качество хорошей веб-разработки. Начните с семантического HTML, добавьте лейблы и alt-текст, обеспечьте клавиатурную навигацию и тестируйте с ассистивными технологиями.