Rola Region na żywo

`alert`

Region na żywo przekazujący pilny, zależny od czasu komunikat. Czytniki ekranu ogłaszają go natychmiast, przerywając bieżącą mowę. Używaj oszczędnie — rezerwuj dla prawdziwych błędów i ostrzeżeń; nadużycie powoduje zmęczenie technologią asystującą.

Kiedy używać

Dla komunikatów, które naprawdę przerywają użytkownika — nieudane przesłanie formularza, zbliżające się wygaśnięcie sesji, utrata połączenia. role="alert" jest równoważny aria-live="assertive" plus aria-atomic="true", co oznacza, że czytnik ekranu przerywa bieżące ogłoszenie i odczytuje alert jako następne.

Używaj oszczędnie. Asertywne ogłoszenia przerywają bieżące zadanie użytkownika; wywoływanie jednego po każdym zapisanym polu lub udanej akcji jest uciążliwe. Dla nienagłych zmian statusu użyj zamiast tego role="status" (aria-live="polite").

Najtrudniejsza zasada: element alertu MUSI istnieć w DOM przed wstawieniem komunikatu, a treść MUSI być dodana (nie przełączona z ukrytej), aby ogłoszenie zadziałało. Wstawianie <div role="alert">Błąd</div> od zera jest zawodne w różnych czytnikach ekranu. Bezpieczny wzorzec: renderuj pusty <div role="alert"></div> przy ładowaniu strony, a następnie aktualizuj jego treść tekstową, gdy wystąpi alert.

Kiedy używać alert vs. status

Użyj `role="alert"`	Użyj `role="status"`
Błędy walidacji formularza	„Produkt dodany do koszyka”
Zbliżające się wygaśnięcie sesji	Zaktualizowana liczba wyników wyszukiwania
Utrata połączenia	Wskaźnik „Zapisano”
Nieudana płatność	Zakończono ładowanie

Częste błędy

Element alertu dodany do DOM po komunikacie — wiele czytników ekranu nie ogłasza.
Przełączanie hidden na wstępnie wypełnionym alercie. Zmiana treści tekstowej wyzwala ogłoszenie; samo przełączanie widoczności może tego nie robić.
Używanie role="alert" dla rutynowego statusu. Zalewa użytkownika przerwaniami.
Wiele alertów wstawionych szybko — późniejsze komunikaty czekają w kolejce za wcześniejszymi, czasem przez dziesiątki sekund.
Komunikat alertu, który nie wskazuje pola ani przyczyny — samo „Błąd” jest bezużyteczne. „Adres e-mail jest wymagany.” jest możliwe do działania.
Umieszczanie role="alert" na opakowaniu formularza i oczekiwanie ogłoszeń zmian wewnątrz. Tylko zmiany tekstu samego elementu alertu wyzwalają ogłoszenie.

Przykład

<!-- Renderuj to puste przy ładowaniu strony -->
<div role="alert" id="formErr"></div>

<script>
  // Przy błędzie przesłania:
  document.getElementById('formErr').textContent =
    'Adres e-mail jest wymagany.';
</script>