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

Почему Тестирование Доступности Важно #

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

Доступность не является опциональной для QA:

• Законодательное требование — ADA (США), EAA (ЕС), AODA (Канада) обязывают обеспечивать веб-доступность
• Бизнес-влияние — 15-20% мирового населения имеют ту или иную форму инвалидности
• SEO-польза — Многие практики доступности улучшают поисковую оптимизацию
• Индикатор качества — Доступные сайты, как правило, лучше структурированы

Обзор WCAG 2.2 #

WCAG организован вокруг четырёх принципов (POUR):

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

Контент должен быть представлен способами, которые пользователи могут воспринять: текстовые альтернативы для изображений, субтитры для видео/аудио, адаптируемый контент, достаточный контраст цветов.

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

Интерфейс должен быть навигируемым и управляемым: вся функциональность доступна с клавиатуры, достаточно времени для чтения, нет контента, вызывающего судороги, понятная навигация.

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

Контент и интерфейс должны быть понятными: читаемый текст, предсказуемое поведение, помощь при вводе (идентификация ошибок, labels).

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

Контент должен работать с текущими и будущими технологиями: валидный HTML, корректное использование ARIA, совместимость с ассистивными технологиями.

Уровни Соответствия #

Большинство организаций нацеливаются на WCAG 2.2 Уровень AA.

Техники Ручного Тестирования #

Тестирование Клавиатурной Навигации #

Самый результативный ручной тест:

1. Отложите мышь. Навигируйте по всей странице, используя только клавиатуру.
2. Пройдите Tab по всем интерактивным элементам. Можете ли добраться до каждой ссылки, кнопки, поля формы и меню?
3. Проверьте видимость фокуса. Есть ли видимый индикатор фокуса на текущем элементе?
4. Проверьте клавиатурные ловушки. Можете ли войти и выйти Tab из модальных окон, выпадающих списков?
5. Проверьте логичный порядок табуляции. Фокус перемещается в логичном порядке чтения?

Тестирование со Screen Reader #

Тестируйте хотя бы с одним screen reader:

Базовое тестирование VoiceOver на macOS:

1. Нажмите Cmd+F5 для включения VoiceOver
2. Используйте VO+Стрелка вправо (Ctrl+Option+Right) для навигации по контенту
3. Слушайте: описания изображений, уровни заголовков, текст ссылок, labels форм
4. Проверьте, что обновления динамического контента озвучиваются

Визуальное Тестирование и Тестирование Цвета #

• Проверьте страницу в оттенках серого — передаётся ли информация только цветом?
• Проверьте коэффициенты контраста расширениями браузера (WAVE, axe DevTools)
• Увеличьте до 200% — работает ли вёрстка? Читается ли контент?
• Протестируйте в режиме высокой контрастности Windows

Автоматизированные Инструменты #

axe-core #

Наиболее распространённый движок тестирования доступности:

const { test, expect } = require('@playwright/test');
const AxeBuilder = require('@axe-core/playwright').default;

test('страница не имеет нарушений доступности', async ({ page }) => {
  await page.goto('/');
  const results = await new AxeBuilder({ page }).analyze();
  expect(results.violations).toEqual([]);
});

WAVE Browser Extension #

Бесплатное расширение браузера с визуальным наложением проблем доступности прямо на странице.

Упражнение: Аудит Доступности Веб-Страницы #

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

Часть 1: Автоматическое Сканирование #

Запустите axe-core сканирование на странице по вашему выбору:

1. Установите расширение axe DevTools
2. Откройте страницу и запустите полное сканирование
3. Задокументируйте все находки:

Часть 2: Аудит Клавиатуры #

Навигируйте по странице только с клавиатуры:

Часть 3: Проверка со Screen Reader #

Включите VoiceOver (Mac) или NVDA (Windows) и навигируйте по странице:

Интеграция A11y в Рабочий Процесс #

Подход Shift-Left #

• Фаза дизайна: Проверка макетов на контраст, состояния фокуса, иерархию заголовков
• Разработка: Использование axe-core линтера в IDE для обнаружения проблем до коммита
• Code review: Проверка alt-текста, ARIA-атрибутов, семантического HTML
• Тестирование: Автоматические axe-сканирования + ручное тестирование клавиатурой/screen reader
• CI/CD: Провал сборки при критических нарушениях доступности

Ключевые Выводы #

• Тестирование доступности требует и автоматизированных инструментов, и ручного тестирования — по отдельности недостаточно
• Клавиатурное тестирование — самая результативная ручная проверка доступности
• Целевой уровень — WCAG 2.2 Level AA как минимальный стандарт
• Используйте axe-core в автоматизации тестов и CI/CD pipeline для непрерывной проверки
• Тестируйте хотя бы с одним screen reader для обнаружения проблем, которые автоматика упускает
• Баги доступности часто проще всего исправить, но они наиболее значимы для пользователей