Почему тестирование доступности важно
Тестирование доступности гарантирует, что люди с инвалидностью могут использовать ваш продукт. Это включает пользователей с нарушениями зрения, слуха, двигательными нарушениями, когнитивными ограничениями или временными нарушениями (сломанная рука, яркий свет на экране).
Примерно 15% мирового населения — более миллиарда людей — имеют ту или иную форму инвалидности. Помимо этического императива, доступность всё больше становится юридическим требованием. Законы ADA (США), Европейский акт доступности (EAA) и аналогичные по всему миру предписывают создание доступных цифровых продуктов.
Как QA-инженер, тестирование доступности не опционально — это фундаментальный атрибут качества, который вы обязаны проверять.
WCAG 2.1: Стандарт
Руководство по доступности веб-контента (WCAG) 2.1, опубликованное W3C, — глобальный стандарт веб-доступности. Он организован вокруг четырёх принципов POUR.
Принципы POUR
Perceivable (Воспринимаемый) — Информация и компоненты UI должны быть представлены способами, которые пользователи могут воспринять.
- Текстовые альтернативы для изображений (alt text)
- Субтитры для видео
- Достаточный цветовой контраст
- Контент, адаптируемый к различным представлениям
Operable (Управляемый) — Компоненты UI и навигация должны быть управляемыми.
- Доступность с клавиатуры (вся функциональность через клавиатуру)
- Достаточно времени для чтения и использования контента
- Контент не вызывает припадков (мигание)
- Навигируемость (чёткие заголовки, порядок фокуса, skip-ссылки)
Understandable (Понятный) — Информация и работа UI должны быть понятными.
- Читаемый текст (указан язык, ясное написание)
- Предсказуемое поведение (согласованная навигация)
- Помощь при вводе (идентификация ошибок, метки, инструкции)
Robust (Надёжный) — Контент должен быть достаточно надёжным для интерпретации вспомогательными технологиями.
- Валидный HTML
- Правильное использование атрибутов ARIA
- Совместимость с текущими и будущими пользовательскими агентами
Уровни соответствия
| Уровень | Описание | Требования |
|---|---|---|
| A | Минимальная доступность | Обязательные основы (alt text, доступ с клавиатуры, метки) |
| AA | Стандартная доступность | Большинство законов нацелены на этот уровень |
| AAA | Расширенная доступность | Максимальный стандарт (жестовый язык, повышенный контраст) |
Типичные проблемы доступности
Визуальные
- Отсутствие alt text: Изображения без описательных атрибутов
alt - Плохой цветовой контраст: Контраст текст-фон ниже 4.5:1
- Информация только цветом: Использование только цвета для передачи смысла
- Отсутствие индикаторов фокуса: Нет видимого контура при навигации Tab
- Текст в изображениях: Критичный текст встроен в изображения вместо HTML
Клавиатурная навигация
- Ловушки клавиатуры: Фокус застревает в компоненте без возможности выхода
- Нелогичный порядок Tab: Фокус непредсказуемо прыгает по странице
- Отсутствие skip-ссылок: Нет возможности пропустить повторяющуюся навигацию
- Элементы, недоступные с клавиатуры: Выпадающие списки или модалки только для мыши
Скринридер
- Отсутствие меток ARIA: Интерактивные элементы без доступных имён
- Неправильная иерархия заголовков: Перескок с
<h1>на<h4> - Отсутствие меток форм: Поля без связанных элементов
<label> - Динамический контент не объявляется: AJAX-обновления, не обнаруживаемые скринридерами
Мультимедиа
- Отсутствие субтитров: Видео без синхронизированных текстовых субтитров
- Нет аудиоописания: Визуальная информация в видео не описана звуком
- Автовоспроизведение медиа: Аудио или видео запускается автоматически
Инструменты автоматического тестирования
Автоматические инструменты обнаруживают примерно 30-40% проблем доступности. Остальное требует ручного тестирования.
| Инструмент | Тип | Лучше для |
|---|---|---|
| axe DevTools | Расширение браузера | Комплексное автоматическое сканирование |
| Lighthouse | Встроен в Chrome | Быстрая оценка и аудит |
| WAVE | Расширение браузера | Визуальное наложение проблем |
| Pa11y | CLI инструмент | Интеграция CI/CD |
| axe-core | Библиотека | Интеграция в автотесты |
Техники ручного тестирования
Тестирование клавиатурой
Самый важный ручной тест. Навигируйте по всей странице только клавиатурой:
- Tab: Переход вперёд по интерактивным элементам
- Shift+Tab: Переход назад
- Enter/Пробел: Активация кнопок и ссылок
- Стрелки: Навигация внутри компонентов
- Escape: Закрытие модалок и попапов
Тестирование со скринридером
Тестируйте хотя бы с одним скринридером: NVDA (Windows), VoiceOver (macOS/iOS), JAWS (Windows), TalkBack (Android).
Тестирование масштабирования
Увеличьте страницу до 200% и проверьте: весь ли контент видим? Адаптируется ли раскладка без горизонтальной прокрутки?
Упражнение: Аудит WCAG 2.1 AA
Проведите аудит доступности публичного веб-сайта на соответствие WCAG 2.1 уровень AA.
Задание
Проведите аудит, используя автоматические инструменты и ручные техники. Задокументируйте минимум 10 проблем.
Шаги
- Запустите сканирование axe DevTools и зафиксируйте Critical и Serious проблемы
- Запустите аудит Lighthouse и отметьте оценку
- Проведите тест навигации клавиатурой на главной и странице с формой
- Протестируйте с VoiceOver или NVDA минимум на 3 страницах
- Проверьте контрастность цвета всех текстовых элементов
- Убедитесь, что все изображения имеют подходящий alt text
- Проверьте иерархию заголовков (h1 > h2 > h3)
- Протестируйте при масштабе 200%
Подсказка: Шаблон отчёта
| # | Проблема | Критерий WCAG | Уровень | Инструмент | Серьёзность | Расположение | Рекомендация |
|---|---|---|---|---|---|---|---|
| 1 | Отсутствие alt text на hero | 1.1.1 | A | axe | Критичный | Главная | Добавить описательный alt |
Решение: Пример отчёта аудита
Результаты автоматического сканирования (axe DevTools):
| # | Проблема | Критерий | Уровень | Серьёзность | Кол-во |
|---|---|---|---|---|---|
| 1 | Изображения без alt text | 1.1.1 | A | Критичный | 5 |
| 2 | Поля ввода без меток | 1.3.1 | A | Критичный | 3 |
| 3 | Недостаточная контрастность | 1.4.3 | AA | Серьёзный | 8 |
| 4 | Ссылки без различимого текста | 4.1.2 | A | Серьёзный | 2 |
| 5 | Не указан язык документа | 3.1.1 | A | Серьёзный | 1 |
Результаты ручного тестирования:
| # | Проблема | Критерий | Уровень | Метод | Серьёзность |
|---|---|---|---|---|---|
| 6 | Ловушка клавиатуры в модалке выбора даты | 2.1.2 | A | Клавиатура | Критичный |
| 7 | Нет skip navigation ссылки | 2.4.1 | A | Клавиатура | Серьёзный |
| 8 | Фокус не виден на ссылках навигации | 2.4.7 | AA | Клавиатура | Серьёзный |
| 9 | Иерархия заголовков перескакивает h2 на h4 | 1.3.1 | A | Скринридер | Средний |
| 10 | Видео без субтитров | 1.2.2 | A | Ручная проверка | Критичный |
Итого: Оценка Lighthouse: 62/100. Найдено 12 проблем: 3 критических, 5 серьёзных, 2 средних, 2 незначительных. Сайт не соответствует WCAG 2.1 уровень A по нескольким критериям.
Профессиональные советы
- Автоинструменты находят только 30-40%: Никогда не полагайтесь только на автоматические инструменты. Тестирование клавиатурой и скринридером необходимо.
- Интегрируйте axe-core в CI/CD: Добавьте
@axe-core/playwrightв вашу автотестовую сюиту для выявления регрессий доступности до деплоя. - Тестируйте с реальными пользователями: По возможности привлекайте людей с инвалидностью к тестированию юзабилити.
- ARIA — последнее средство: Атрибуты ARIA должны дополнять семантический HTML, а не заменять его. Элемент
<button>всегда лучше<div role="button">. - Доступность — не одноразовый аудит: Встраивайте проверки доступности в регулярный цикл тестирования. Каждая новая фича должна проверяться на клавиатурный доступ, совместимость со скринридером и контрастность.