Основы тестирования доступности (Accessibility)

Мы продолжаем изучать фронтенд. В прошлом уроке мы разобрали «Кроссбраузерность и адаптивность» — как сделать так, чтобы интерфейс работал на разных устройствах. Но качественный продукт должен быть не только удобным, но и инклюзивным.

Доступность (Accessibility, сокращенно a11y) — это создание интерфейсов, которыми могут пользоваться все люди, включая пользователей с нарушениями зрения, слуха, моторики или когнитивных функций. В 2026 году это обязательное требование законодательства во многих странах, включая Россию (согласно ГОСТам по цифровой доступности).

Стандарт WCAG и принципы POUR

Главный ориентир для QA-инженера — международный стандарт WCAG (Web Content Accessibility Guidelines). Все его требования строятся на четырех принципах POUR:

1. Воспринимаемость (Perceivable): информацию можно воспринять разными органами чувств. Например, если пользователь не видит картинку, он должен услышать её описание через скринридер.
2. Управляемость (Operable): интерфейс работает с любыми устройствами ввода. Например, сайтом можно управлять без мыши, только с клавиатуры.
3. Понятность (Understandable): тексты легко читаются, а поведение интерфейса предсказуемо.
4. Отказоустойчивость (Robust): код корректно работает в разных браузерах и со вспомогательными технологиями, такими как скринридеры (программы, озвучивающие экран).

Как показано в Иерархии 1, доступность проверяется на трех уровнях: техническом, визуальном и контентном.

Семантика HTML как фундамент

Большинство проблем доступности решается правильной версткой. Если разработчик использует семантические теги, браузер и скринридер сразу понимают роль элемента.

<button type="button">Отправить заявку</button>

<div class="my-custom-button" onclick="sendData()">Отправить заявку</div>

Чек-лист для Middle QA

При тестировании доступности важно пройти путь пользователя вручную.

1. Навигация с клавиатуры

Проверьте, можно ли пройти основной сценарий (например, покупку товара), используя только:

• Tab — переход к следующему элементу;
• Shift + Tab — переход назад;
• Enter / Space — нажатие.

2. Цветовая контрастность

Текст должен быть читаемым. Для стандартного текста (уровень AA) коэффициент контрастности должен быть не менее 4.5. Если текст серый на светло-сером фоне — это баг.

3. Альтернативные тексты (Alt-тексты)

Проверьте атрибут alt у изображений:

• Если картинка несет смысл (график, фото товара) — в alt должно быть краткое описание.
• Если картинка декоративная (иконка для красоты) — атрибут должен быть пустым (alt=""), чтобы скринридер его проигнорировал.

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

Используйте встроенные возможности DevTools и расширения:

1. Вкладка Accessibility в Elements: показывает «дерево доступности» — то, как сайт видит скринридер.
2. Lighthouse: встроенный аудит, который находит базовые ошибки (контраст, отсутствие alt).
3. Axe или WAVE: расширения, которые находят до 40% технических ошибок автоматически. 🧭

Тестирование доступности — это признак уровня Middle. Вы учитесь видеть продукт глазами всех пользователей, а не только технические баги.

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