WCAG 4.1.3 Komunikaty o stanie

Kryterium sukcesu 4.1.3 sprawia, że użytkownicy czytników ekranu słyszą krótkie komunikaty, które osoby widzące widzą pojawiające się na stronie. Gdy klient naciska „Dodaj do koszyka”, a w rogu pojawia się mała informacja „Dodano do koszyka”, klient niewidomy może nic nie usłyszeć i nacisnąć przycisk ponownie. To poziom AA; w normie EN 301 549 kryterium to występuje jako punkt 9.4.1.3.

Czego wymaga kryterium

W treści zaimplementowanej za pomocą języków znaczników komunikaty o stanie mogą być określone programowo przez rolę lub właściwości, tak aby technologie wspomagające mogły je przedstawić bez przenoszenia fokusu na komunikat.

Komunikat o stanie to zmiana treści, która nie jest zmianą kontekstu i informuje użytkownika o:

• powodzeniu lub wyniku działania („Dodano do koszyka”, „Kod rabatowy zastosowany”, „Znaleziono 12 produktów”);
• stanie oczekiwania („Ładowanie…”);
• postępie procesu („Przesyłanie 40 %”);
• wystąpieniu błędów („3 pola wymagają uwagi”).

Kryterium nie obejmuje: komunikatów przekazywanych przez przeniesienie fokusu (np. modalnego okna dialogowego) ani treści pokazywanych po otwarciu menu, kart lub akordeonów — są one ogłaszane przez fokus lub zmiany stanu. Sama lista wyników nie jest komunikatem o stanie; liczba wyników — jest.

Typowe błędy w sklepie internetowym

• powiadomienie „Dodano do koszyka” lub aktualizacja licznika mini-koszyka, które nie są w regionie na żywo;
• filtry, które po cichu aktualizują siatkę produktów i licznik „24 produkty”;
• pole kodu rabatowego, które pokazuje „Kod zastosowany” lub „Kod wygasł” bez roli;
• podsumowania błędów formularza, które pojawiają się po wysłaniu, gdy fokus pozostaje na przycisku, bez role="alert";
• „Ładowanie kolejnych produktów…” przy nieskończonym przewijaniu, które jest tylko animowanym obrazkiem;
• problem odwrotny: role="alert" lub aria-live="assertive" przy rutynowych komunikatach, co nieustannie przerywa użytkownikom.

Jak to sprawdzić

Automatycznie: nasz skaner nie ma reguły dla tego kryterium. Nie wywołuje działań, po których pojawiają się komunikaty o stanie, dlatego potrzebna jest kontrola ręczna.

Ręcznie: należy włączyć czytnik ekranu (NVDA, VoiceOver). Dodać produkt do koszyka, zastosować i usunąć filtr, wpisać błędny kod rabatowy, wysłać formularz z błędami, doładować kolejne produkty. Nie przenosząc fokusu, sprawdzić, czy każdy widoczny komunikat jest ogłaszany. W narzędziach deweloperskich sprawdzić, czy kontener komunikatu ma role="status", role="alert", role="log" lub aria-live i czy istnieje na stronie, zanim zostanie do niego wstawiony tekst.

Jak to naprawić

• Przy ładowaniu strony dodać pusty kontener z role="status" (lub aria-live="polite") i wstawiać do niego tekst komunikatu.
• Stosować role="alert" tylko dla błędów i pilnych komunikatów.
• Ogłaszać cały komunikat, na przykład „3 produkty w koszyku”, używając aria-atomic="true", jeśli zmienia się tylko jego część.
• Nadać wskaźnikom ładowania tekstowy odpowiednik, na przykład „Ładowanie produktów”, wewnątrz regionu na żywo.

Powiązane kryteria

• 3.3.1 Identyfikacja błędu — błędy opisane tekstem.
• 3.2.2 Podczas wprowadzania danych — aktualizowanie treści zamiast zmiany kontekstu.
• 4.1.2 Nazwa, rola, wartość — kontrolki przekazują swój stan technologiom wspomagającym.

Najczęstsze pytania

Czym jest komunikat o stanie w WCAG?

To zmiana treści, która nie jest zmianą kontekstu i informuje użytkownika o powodzeniu lub wyniku działania, stanie oczekiwania, postępie procesu albo wystąpieniu błędów. Przykłady: „Dodano do koszyka”, „12 wyników”, „Zapisywanie…”.

Użyć role="status" czy role="alert"?

Dla większości komunikatów, takich jak aktualizacje koszyka i liczba wyników, należy użyć role="status" (uprzejmy region na żywo). role="alert" warto zostawić dla ważnych, pilnych komunikatów, takich jak błędy, aby czytniki ekranu nie przerywały użytkownikowi bez przerwy.

Czy okno dialogowe, które przejmuje fokus, jest komunikatem o stanie?

Nie. Gdy fokus przechodzi na komunikat, jak w przypadku modalnego okna dialogowego, jest on już ogłaszany i 4.1.3 nie ma zastosowania. Kryterium dotyczy komunikatów, które pojawiają się, gdy fokus pozostaje na swoim miejscu.

Czy automatyczne narzędzie może sprawdzić 4.1.3?

Nie. Skaner widzi stronę po załadowaniu, ale nie dodaje produktów do koszyka ani nie wysyła formularzy, więc nie widzi pojawiających się komunikatów. Potrzebna jest kontrola ręczna z czytnikiem ekranu.