Кратко и по делу — практики для создания доступного интерфейса (HTML/CSS/JS) и способы тестирования.
Основные принципы
- Используйте семантическую HTML-разметку: ``, ``, ``, ``, заголовки ``–``, списки `/`. Это даёт правильную «доступную» структуру для вспомогательных технологий.
- Следуйте WCAG $2.1$ и стремитесь минимум к уровню AA (ключевые критерии: контраст, фокус, формы, медиа).
- Минимизируйте ненужные ARIA: сначала семантика, потом ARIA только если нужно.
Фокус и клавиатурная доступность
- Все управляемые элементы должны быть доступны с клавиатуры (Tab, Enter, Space, стрелки, Esc).
- Не ломайте естественный порядок табуляции; если нужно вручную управлять — используйте `tabindex="$0$"` для включения и `tabindex="$-1$"` для временного исключения.
- Визуально показывайте фокус (очень важен для клавиаточников) и не убирайте outline без альтернативы.
- Обрабатывайте фокус при открытии модалок (трамплин на первый фокусируемый элемент) и возвращайте фокус при закрытии.
ARIA и доступные имена
- Используйте ARIA для динамических/нестандартных контролов: `role`, `aria-label`, `aria-labelledby`, `aria-describedby`, `aria-expanded`, `aria-hidden`.
- Следите за Accessible Name Computation: элемент должен иметь понятное имя/метку.
- Для динамических обновлений используйте `aria-live` (например `aria-live="polite"` или `assertive`).
Формы и ошибки
- Каждое поле — с ``; если метка визуально скрыта — используйте доступное скрытие (не display:none).
- Показывайте ошибки текстом, связывая `aria-describedby` с сообщением об ошибке.
- Предоставляйте подсказки и примеры ввода (placeholder не заменяет label).
Цвет и масштабирование
- Контраст текста против фона минимум $4.5:1$ для обычного текста и $3:1$ для крупного текста.
- Тестируйте масштабирование/зум до $200\%$ без потери контента и функциональности.
- Не полагайтесь только на цвет для передачи информации (добавляйте иконки/текст/инструкции).
Изображения и медиа
- Всегда добавляйте `alt` для ``; для декоративных — `alt=""`.
- Видео — субтитры и текстовые расшифровки; аудио — транскрипты.
- Для динамического контента обеспечьте контроль воспроизведения (pause/stop) и уважайте предпочтения «reduced motion».
CSS и визуальные фичи
- Не задавайте размеры в абсолютных единицах, используйте относительные единицы (rem/em) для масштабируемости.
- Избегайте скрытия контента через `display:none`/`visibility:hidden` если он нужен вспомогательным технологиям.
- Поддерживайте пользовательские темы/контрасты и системные настройки (prefers-reduced-motion, prefers-color-scheme).
JS — доступность поведения
- Для пользовательских контролов реализуйте клавиши управления (Enter/Space/Arrow) и роль/aria соответствия.
- Не блокируйте скринридеры частыми изменениями DOM; используйте `aria-live` для оповещений.
- Управляйте фокусом аккуратно при динамических вставках/удалениях.
Небольшие примеры (фрагменты)
- Skip-link:
Перейти к основному содержимому
- Кнопка:
Включить
- Форма с ошибкой:
EmailВведите корректный email
- Модал: переключение фокуса на первый элемент и `tabindex="$-1$"` для контейнера, чтобы вернуть фокус.
Тестирование доступности
Автоматизированные инструменты:
- axe (DevTools/CLI) — интегрируется в CI.
- Lighthouse (Chrome) — быстрый отчёт.
- WAVE, pa11y — хорошие для быстрой проверки.
Ручное тестирование (обязательно):
- Навигация только с клавиатуры (Tab/Shift+Tab, Enter, Space, стрелки, Esc).
- Просмотр с экранными читалками: NVDA+Firefox, VoiceOver+Safari, JAWS (по необходимости).
- Тестирование масштабирования/зумирования до $200\%$ и проверки в мобильных устройствах.
- Проверка контраста инструментами и симуляторами дальтонизма.
- Проверка отключения CSS/смены шрифтов, включения high-contrast и reduced-motion в системе.
Интеграция в процесс разработки
- Включите автоматические проверки (axe-core, jest-axe, pa11y) в CI.
- Проводите ревью кода с чек-листом доступности.
- Регулярно прогоняйте ручное тестирование и привлекайте пользователей с реальными потребностями.
Короткий чек-лист перед релизом
- Семантика + видимые лейблы
- Клавиатурная навигация и видимый фокус
- Контраст $\ge 4.5:1$ для текста
- Рабочие подсказки/ошибки, ARIA только при необходимости
- Видео/аудио с субтитрами/транскриптом
- Автотесты в CI + ручное тестирование экранными читалками
Ресурсы
- WCAG $2.1$ (W3C), axe-core, Lighthouse, NVDA, VoiceOver.
Если нужно — могу дать готовый чек‑лист в виде файла или примеры кода для конкретных компонентов (меню, модал, таблица, форма).