4.1.3 Komunikaty o stanie

Komu i dlaczego to pomaga

Bez tego osoba niewidoma nie wie, że akcja się powiodła albo że pojawił się błąd – na ekranie coś się zmieniło, ale czytnik milczy.

• Osoby niewidome

Jak zrobić to dobrze

• Umieszczaj komunikaty w kontenerze z role="status" (lub aria-live="polite"), a błędy pilne – role="alert".
• Kontener live region musi istnieć w DOM, zanim pojawi się w nim tekst.

Najczęstsze błędy

• Komunikat „Zapisano” wyświetlany na chwilę bez role="status".
• Liczba wyników wyszukiwania aktualizowana bez ogłoszenia.
• Powiadomienia typu toast niewidoczne dla czytników.

Przykład w kodzie

<div role="status" id="koszyk-status"></div>
<script>
  document.getElementById('koszyk-status').textContent = 'Dodano do koszyka';
</script>

Jak to sprawdzić

1. Wykonaj akcję z komunikatem (dodanie do koszyka, filtr) z włączonym czytnikiem ekranu – czy komunikat został odczytany?

Tylko test ręczny. Automat tego nie sprawdzi – potrzebny jest test ręczny lub audyt ekspercki.

Czy to obowiązkowe?

Powiązane kryteria