4.1.3 Komunikaty o stanie

Krótko

Jeśli strona pokazuje komunikat o wyniku działania, postępie procesu, stanie aplikacji albo istnieniu błędu, technologia wspomagająca powinna móc go odczytać bez przenoszenia fokusu.

Nie chodzi o tworzenie nowych komunikatów na siłę. Chodzi o to, żeby komunikaty, które już pojawiają się wizualnie, były programowo rozpoznawalne.

Problem w praktyce

Użytkownik dodaje produkt do koszyka. Na ekranie pojawia się tekst „Produkt dodany”, ale fokus zostaje na przycisku. Osoba korzystająca z czytnika ekranu może nie dowiedzieć się, że akcja się udała.

To kryterium nie zastępuje identyfikacji błędów formularza z 3.3.1. Jeśli błąd jest pokazany po walidacji, trzeba ocenić zarówno jego treść, jak i sposób ogłoszenia, gdy pojawia się bez zmiany fokusu.

Kogo to dotyczy

• Osób korzystających z czytników ekranu, które nie widzą dynamicznie dodanego komunikatu.
• Użytkowników, którzy wykonują akcje w formularzach, koszykach, panelach klienta i aplikacjach webowych.
• Osób, które potrzebują informacji o postępie procesu, na przykład przesyłania pliku.
• Developerów tworzących dynamiczne interfejsy bez przeładowania strony.

Dobry przykład

• Po dodaniu produktu pojawia się komunikat „Produkt dodany do koszyka” w regionie statusu.
• Po zapisaniu ustawień komunikat sukcesu jest ogłoszony bez przenoszenia fokusu.
• Postęp przesyłania pliku jest oznaczony tak, żeby technologia wspomagająca mogła go odczytać.
• Ostrzeżenie ważne i pilne jest oznaczone jako alert, ale tylko wtedy, gdy naprawdę wymaga natychmiastowej uwagi.

Zły przykład

• Komunikat sukcesu pojawia się wizualnie, ale nie jest ogłaszany czytnikowi ekranu.
• Każda drobna informacja ma agresywne ogłoszenie, przez co interfejs staje się hałaśliwy.
• Strona przenosi fokus do komunikatu tylko po to, żeby użytkownik go usłyszał, mimo że wystarczyłby status.
• Komunikat błędu pojawia się dynamicznie, ale nie jest programowo rozpoznawalny.

Przykłady kodu

<div role="status">
  Produkt dodany do koszyka.
</div>

<label for="upload-progress">Przesyłanie pliku</label>
<progress id="upload-progress" max="100" value="60">60%</progress>

<div class="toast">
  Zapisano zmiany.
</div>

Przykład graficzny

Jak sprawdzić

1. Znajdź komunikaty pojawiające się po akcji użytkownika: zapis, dodanie do koszyka, wysłanie formularza, błąd, ostrzeżenie, postęp.
2. Sprawdź, czy pojawiają się bez przeładowania strony i bez przeniesienia fokusu.
3. Jeśli tak, sprawdź w accessibility tree albo czytniku ekranu, czy komunikat jest ogłaszany.
4. Dobierz poziom pilności: zwykły wynik działania jako status, pilny błąd lub ostrzeżenie jako alert tylko wtedy, gdy to uzasadnione.
5. Nie używaj live regionów do wszystkiego. Zbyt wiele ogłoszeń utrudnia korzystanie ze strony.

Co sprawdzi automat, a czego nie

Automat może wykryć

• część dynamicznych komunikatów bez roli lub live regionu,
• nadużycie niektórych ról ARIA,
• brak etykiety dla elementu postępu.

Automat nie oceni pewnie

• czy komunikat jest statusem w rozumieniu WCAG,
• czy poziom pilności jest właściwy,
• czy czytnik ekranu ogłasza komunikat w odpowiednim momencie,
• czy komunikat nie jest zbyt gadatliwy w realnym procesie.

Typowe błędy

• Toast „Zapisano” bez programowego statusu.
• Komunikat „Dodano do koszyka” dostępny tylko wzrokowo.
• Użycie role="alert" do neutralnych, częstych informacji.
• Przenoszenie fokusu do każdego komunikatu, zamiast oznaczenia statusu tam, gdzie nie ma zmiany kontekstu.

Powiązane kryteria

• 4.1.2 Nazwa, rola, wartość: gdy oceniasz rolę, stan albo wartość komponentu.
• 3.3.1 Identyfikacja błędu: gdy treść błędu musi wskazać problem.
• 3.3.3 Sugestie korekty błędów: gdy komunikat błędu powinien podpowiadać poprawkę.

Źródła

• WCAG 2.2: 4.1.3 Status Messages (otwiera się w nowym oknie)
• Understanding WCAG 4.1.3: Status Messages (otwiera się w nowym oknie)
• How to Meet WCAG 4.1.3: Status Messages (otwiera się w nowym oknie)
• ARIA22: Using role=status to present status messages (otwiera się w nowym oknie)
• F103: Failure due to status messages that cannot be programmatically determined (otwiera się w nowym oknie)