WCAG 4.1.3 Повідомлення про статус

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

Що вимагає критерій

У вмісті, створеному мовами розмітки, повідомлення про статус можна програмно визначити через роль чи властивості, щоб допоміжні технології могли показати їх без отримання повідомленням фокуса.

Повідомлення про статус — це зміна вмісту, яка не є зміною контексту і повідомляє користувачеві про:

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

Не охоплено: повідомлення, що передаються переміщенням фокуса (як-от модальний діалог), і вміст, що з'являється при відкритті меню, вкладок чи акордеонів, — їх озвучують через фокус чи зміну стану. Сам список результатів не є повідомленням про статус; кількість результатів — є.

Типові помилки в інтернет-магазині

• спливне повідомлення «Додано в кошик» чи оновлення лічильника міні-кошика поза живою областю;
• фільтри, що мовчки оновлюють сітку товарів і лічильник «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", якщо змінюється лише його частина.
• Дайте спінерам текстовий еквівалент, як-от «Завантаження товарів», усередині живої області.

Пов'язані критерії

• 3.3.1 Виявлення помилок — помилки, описані текстом.
• 3.2.2 Під час введення — оновлюйте вміст замість змінювати контекст.
• 4.1.2 Назва, роль, значення — елементи керування передають свій стан допоміжним технологіям.

Часті запитання

Що таке повідомлення про статус у WCAG?

Зміна вмісту, яка не є зміною контексту і повідомляє користувачеві про успіх чи результат дії, стан очікування, хід процесу або наявність помилок. Приклади: «Додано в кошик», «12 результатів», «Збереження…».

Використовувати role="status" чи role="alert"?

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

Чи є діалог, що забирає фокус, повідомленням про статус?

Ні. Коли фокус переходить на повідомлення, як у модальному діалозі, його вже озвучено, і 4.1.3 не застосовується. Критерій стосується повідомлень, що з'являються, поки фокус залишається на місці.

Чи може автоматичний сканер перевірити 4.1.3?

Ні. Сканер бачить сторінку після завантаження, але не додає товари в кошик і не надсилає форми, тож не бачить, як з'являються повідомлення. Тут потрібна ручна перевірка з програмою зчитування з екрана.