Съобщения за статус

Какво изисква критерият

Когато страницата уведомява потребителя, че нещо се е случило — „Артикулът е добавен в количката”, „Намерени са 3 резултата”, „Връзката е прекъсната”, „Запазване…” — това съобщение трябва да достигне до потребителите на екранни четци, без фокусът да бъде преместен. Информацията трябва да е програмно определена като статус, за да може помощната технология да я улови и обяви.

Три категории, посочени от WCAG:

• Успех / завършване — „Профилът е запазен”, „Имейлът е изпратен”.
• Резултати от действие — „12 резултата”, „Няма намерени съвпадения”.
• Състояние на приложението — „Запазване…”, „Повторно свързване”, „Качване 40%”.

Как да се постигне съответствие

• Поставете жив регион в DOM при зареждане на страницата — празен елемент с role="status" (деликатно) или role="alert" (настоятелно). При актуализация записвайте новия текст в него.
• За некритични потвърждения и брой резултати — използвайте role="status" или aria-live="polite". Екранните четци изчакват потребителят да е в покой, след което обявяват.
• За критични съобщения — грешки при изпращане на формуляр, загубена връзка, изтичаща сесия — използвайте role="alert" или aria-live="assertive". Обявяването прекъсва текущото четене.
• Toast известията се нуждаят от жив регион. Контейнерът за toast трябва да съществува в DOM преди да се появи известието, с вече зададен aria-live, а текстът на известието да се инжектира като дъщерен елемент.
• Комбинирайте aria-live с aria-atomic="true", ако желаете целият регион да се прочита отново при всяка актуализация, а не само променените възли.
• При грешки на формуляра вграденото съобщение за грешка може да използва role="alert" или фокусът да се премести към обобщение в началото на формуляра — но не правете двете едновременно; потребителите трябва да чуят съобщението само веднъж.

Чести грешки

• Toast известия, рендирани в елемент, който не е съществувал преди появата им — слушателят на живия регион никога не се прикача и нищо не се обявява.
• Банер за успех, вмъкнат в страницата, но извън какъвто и да е регион с aria-live — видим за зрящите потребители, невидим за потребителите на екранни четци.
• Брой резултати от търсене („Показване на 12 от 340”), актуализиращ се безшумно след филтриране. Потребителите се връщат в резултатите несигурни дали нещо се е променило.
• Валидиране на формуляр, актуализиращо вграден <span class="error"> без role="alert" или aria-live — грешката се появява, екранният четец мълчи.
• Използване на aria-live="assertive" за всяка актуализация на статус. Постоянните прекъсвания принуждават потребителите на екранни четци да деактивират страницата.
• Преместване на фокуса към съобщение за статус, което не е заглавие или интерактивен елемент — фокусът попада на нетабулируем елемент и клавиатурните потребители губят позицията си.
• Индикатори „Запазване…” / „Запазено”, превключващи CSS клас, но никога не актуализиращи текстовото съдържание вътре в жив регион.

Защо е важно

Съобщенията за статус са слабото място на съвременните едностранични приложения. Страницата никога не се презарежда, фокусът рядко се мества и единственият сигнал за потребителя, че нещо се е случило, е визуална промяна — безполезна за всеки, който не гледа екрана. 4.1.3 налага равенство: ако зрящ потребител може да види „Добавено в количката”, потребителят на екранен четец може да го чуе. Поправката е почти винаги евтина (един жив регион, попълван при актуализация) и нейното отсъствие почти винаги нарушава ключови процеси — плащане, търсене, изпращане на формуляр, чат в реално време.