Live region

Live region to część DOM, której zmiana treści jest automatycznie ogłaszana użytkownikom czytników ekranu — bez przenoszenia fokusa, bez konieczności nawigowania do niej i bez zmuszania użytkownika do odświeżania strony.

Live regiony stanowią mechanizm działający za każdym powiadomieniem „Toast: Produkt dodany do koszyka”, za każdym komunikatem walidacji formularza „Błąd: Adres e-mail jest wymagany” i za każdą aktualizacją liczby wyników wyszukiwania, którą faktycznie słyszy użytkownik czytnika ekranu.

Podstawowy atrybut

Najprostszy live region to element div z atrybutem aria-live="polite":

<div aria-live="polite" id="status">
  <!-- treść tutaj zostanie ogłoszona po zmianie -->
</div>

Gdy JavaScript wstawi tekst do elementu #status, czytnik ekranu ogłosi nową treść przy najbliższej naturalnej przerwie — bez przerywania tego, co użytkownik aktualnie czyta.

Polite kontra assertive

Atrybut aria-live ma dwie wartości operacyjne:

• polite — czeka, aż użytkownik będzie bezczynny, a następnie ogłasza. Stosuje się do większości powiadomień: potwierdzeń, liczb wyników wyszukiwania, komunikatów o stanie.
• assertive — przerywa bieżące odczytywanie i ogłasza natychmiast. Stosuje się wyłącznie do naprawdę pilnych komunikatów: błędów krytycznych, ostrzeżeń o wygaśnięciu sesji, alertów ograniczonych czasowo.

Nadmierne używanie trybu assertive to najczęstszy błąd live regionów. Każdy drobny toast wywołujący assertive zamienia czytnik ekranu w nieustanny przerywnik, ucząc użytkownika wyłączania live regionu.

Alternatywy oparte na rolach ARIA

Kilka ról ARIA implikuje aria-live automatycznie:

• role="alert" → działa jak aria-live="assertive".
• role="status" → działa jak aria-live="polite".
• role="log" → polite, z semantycznym wskazaniem dziennika tylko do dopisywania (historia czatu, wyjście konsoli).
• role="timer" → polite, dla liczników czasu.

Wybór roli jest często czytelniejszy niż bezpośredni wybór wartości aria-live — dokumentuje cel regionu.

Co zawodzi w praktyce

• Live region dodany jednocześnie z treścią. ARIA ogłasza tylko zmiany w live regionach, które już istniały w DOM. Wstawienie bloku <div aria-live="polite">Załadowano</div> nie spowoduje ogłoszenia — region i treść pojawiły się razem. Rozwiązanie: należy utrzymywać pusty live region w DOM od momentu ładowania strony i wypełniać go później.
• Zbyt szybkie aktualizacje. Wielokrotne wstawianie tekstu do live regionu w ciągu sekundy powoduje pominięcie poprzedniego ogłoszenia przed jego zakończeniem. Użytkownik słyszy fragmenty. Należy stosować throttling lub debouncing aktualizacji.
• Ogłoszenia zarządzane przez modal, które powinny używać fokusa. Jeśli celowa czynność użytkownika wywołała komunikat, przeniesienie fokusa na komunikat (lub powiązaną kontrolkę) jest często lepszym rozwiązaniem niż poleganie na ogłoszeniu live regionu. Live regiony służą do powiadomień pasywnych.
• Dekoracyjny szum w live regionie. Live region zawierający wskaźniki ładowania, ikony i znaczniki czasu oprócz komunikatu sprawia, że czytnik ekranu odczytuje wszystko przy każdej aktualizacji. Należy ograniczyć treść regionu wyłącznie do komunikatu.