WCAG 4.1.3 Сообщения о состоянии

Критерий успеха 4.1.3 нужен для того, чтобы пользователи программ экранного доступа (скринридеров) слышали короткие сообщения, которые зрячие пользователи видят на странице. Когда покупатель нажимает «В корзину» и в углу появляется маленькая надпись «Добавлено в корзину», незрячий покупатель может ничего не услышать и нажать кнопку ещё раз. Это уровень AA, в EN 301 549 он представлен как пункт 9.4.1.3. Тот же стандарт принят в Украине как ДСТУ EN 301 549:2022.

Что требует критерий

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

Сообщение о состоянии — это изменение содержимого, которое не является изменением контекста и сообщает пользователю:

• об успехе или результате действия («Добавлено в корзину», «Промокод применён», «Найдено 12 товаров»);
• о состоянии ожидания («Загрузка…»);
• о ходе процесса («Загружено 40 %»);
• о наличии ошибок («3 поля требуют внимания»).

Не охватываются: сообщения, которые передаются перемещением фокуса (например, модальный диалог), и содержимое, которое показывается при открытии меню, вкладок или аккордеонов, — они объявляются через фокус или изменения состояния. Сам список результатов не является сообщением о состоянии, а количество результатов — является.

Типичные ошибки в интернет-магазине

• всплывающее уведомление «Добавлено в корзину» или обновление счётчика мини-корзины не находятся в live-области;
• фильтры молча обновляют сетку товаров и счётчик «24 товара»;
• поле промокода показывает «Код применён» или «Срок действия кода истёк» без роли;
• сводка ошибок формы появляется после отправки, пока фокус остаётся на кнопке, без role="alert";
• «Загружаем ещё товары…» при бесконечной прокрутке — это только картинка-спиннер;
• обратная проблема: role="alert" или aria-live="assertive" на рутинных сообщениях, которые постоянно прерывают пользователя.

Как проверить

Автоматически: в нашей проверке нет правила для этого критерия. Она не выполняет действия, после которых появляются сообщения о состоянии, поэтому нужна ручная проверка.

Вручную: включите скринридер (NVDA, VoiceOver). Добавьте товар в корзину, примените и снимите фильтр, введите неверный промокод, отправьте форму с ошибками, подгрузите ещё товары. Не перемещая фокус, послушайте, объявляется ли каждое видимое сообщение. В инструментах разработчика проверьте, что у контейнера сообщения есть role="status", role="alert", role="log" или aria-live и что он уже есть на странице до вставки текста.

Как исправить

• Добавьте при загрузке страницы пустой контейнер с role="status" (или aria-live="polite") и вставляйте в него текст сообщения.
• Используйте role="alert" только для ошибок и срочных сообщений.
• Объявляйте сообщение целиком, например «3 товара в корзине», с aria-atomic="true", если меняется только его часть.
• Дайте спиннерам текстовый эквивалент, например «Загружаем товары», внутри live-области.

Связанные критерии

• 3.3.1 Обнаружение ошибок — ошибки описаны текстом.
• 3.2.2 При вводе данных — обновляйте содержимое вместо изменения контекста.
• 4.1.2 Имя, роль, значение — элементы управления передают своё состояние вспомогательным технологиям.

Частые вопросы

Что такое сообщение о состоянии в WCAG?

Изменение содержимого, которое не является изменением контекста и сообщает пользователю об успехе или результате действия, состоянии ожидания, ходе процесса или наличии ошибок. Примеры: «Добавлено в корзину», «12 результатов», «Сохранение…».

Что использовать: role="status" или role="alert"?

Используйте role="status" (вежливая live-область) для большинства сообщений, например обновлений корзины и количества результатов. Оставьте role="alert" для важных, срочных сообщений, например ошибок, чтобы скринридер не прерывал пользователя постоянно.

Является ли диалог, который получает фокус, сообщением о состоянии?

Нет. Когда фокус переходит на сообщение, как в модальном диалоге, оно уже объявляется, и 4.1.3 не применяется. Критерий касается сообщений, которые появляются, пока фокус остаётся на месте.

Может ли автоматическая проверка протестировать 4.1.3?

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