Что такое WCAG 2.1 и принципы POUR · 12 мин
🎯 Цель урока

Понять назначение стандарта WCAG 2.1, разобраться в четырёх принципах POUR и узнать, за что отвечает QA-инженер при проверке доступности.

Контекст

WCAG (Web Content Accessibility Guidelines) — это международный стандарт, разработанный консорциумом W3C, который описывает требования к доступности веб-контента. Без его понимания невозможно систематически тестировать доступность: QA будет находить случайные проблемы вместо охватывающей проверки.

  • Более 1 миллиарда людей в мире имеют ту или иную форму инвалидности — это реальные пользователи продукта.
  • Во многих странах соответствие WCAG 2.1 AA является законодательным требованием для государственных и коммерческих сайтов.
  • Недоступный продукт — это не только репутационный и юридический риск, но и прямая потеря аудитории.
  • QA-инженер — это последний барьер перед тем, как нарушение доступности попадёт к пользователям со скринридерами, клавиатурными навигаторами или другими ассистивными технологиями.

Рабочий алгоритм

При знакомстве с новым проектом используй следующий алгоритм для систематизации задач по доступности:

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

Пример из практики

Команда выпустила новый онбординг с видео-приветствием CEO. QA применяет проверку по POUR: — Perceivable: видео без субтитров и без текстовой альтернативы → нарушение 1.2.2 (уровень AA). — Operable: кнопка «Пропустить видео» недоступна с клавиатуры → нарушение 2.1.1 (уровень A). — Understandable: кнопка воспроизведения помечена как «Кнопка», без описания действия → нарушение 3.3.2 (уровень A). — Robust: элемент `<div role="button">` без `tabindex="0"` не объявляется скринридером как интерактивный → нарушение 4.1.2 (уровень A). Итог: QA зафиксировал четыре дефекта ещё до передачи фичи в staging, сэкономив команде повторный цикл релиза.

Частые ошибки

Junior QA-инженеры при первом знакомстве с WCAG допускают типичные ошибки:

  • Путают уровни: считают, что уровень AAA обязателен, и тратят время на критерии, не входящие в требования проекта.
  • Тестируют только визуальную доступность, игнорируя проверку с клавиатурой и скринридером.
  • Относятся к WCAG как к чеклисту «галочек», а не к руководству по пользовательскому опыту.
  • Не уточняют у команды целевой уровень соответствия, проверяя всё подряд без приоритетов.
  • Упускают принцип Robust: проверяют внешний вид и функции, но не валидность разметки и ARIA-атрибуты.

Самопроверка

1Что означают буквы POUR и за что отвечает каждый принцип?
P — Perceivable (Воспринимаемость): контент доступен через органы чувств. O — Operable (Управляемость): интерфейс работает с клавиатуры и даёт достаточно времени. U — Understandable (Понятность): контент и управление предсказуемы и понятны. R — Robust (Надёжность): разметка корректна и совместима с ассистивными технологиями.