Rola Region na żywo

`status`

Region na żywo przekazujący nieistotne informacje doradcze. Czytniki ekranu ogłaszają zmiany grzecznie — przy najbliższej przerwie w mowie, bez przerywania. Używaj do rutynowych potwierdzeń, liczników i komunikatów o postępie. Natywny element <output> posiada tę rolę.

Kiedy używać

Do nieistotnych komunikatów doradczych: „Zapisano”, „12 wyników”, „Dodano do koszyka”, „Łączenie…”. role="status" jest odpowiednikiem aria-live="polite" z domyślnym aria-atomic="true" — czytnik ekranu czeka na zakończenie bieżącej wypowiedzi, a następnie odczytuje zmianę.

Większość potwierdzeń przesłania formularzy, liczników wyników wyszukiwania, zakończeń ładowania i powiadomień toast należy tu. Zachowaj role="alert" dla rzeczywistych przerwań.

Natywny element <output> automatycznie posiada role="status" — przydatne dla wyników w stylu kalkulatora w połączeniu z polami <form>. Do powiadomień toast i komunikatów statusu poza kontekstem formularza standardowym wzorcem jest <div role="status">.

Podobnie jak wszystkie regiony na żywo, element status MUSI być w DOM przed wstawieniem komunikatu. Renderuj <div role="status"></div> pusty, a następnie aktualizuj jego zawartość tekstową. Dodanie elementu od zera z już zawartą treścią jest zawodne.

Kompromisy regionów na żywo

aria-live="off" — brak ogłaszania. Domyślne dla zwykłej treści.
aria-live="polite" (≡ role="status") — ogłaszane przy najbliższej przerwie. Domyślne dla komunikatów statusu.
aria-live="assertive" (≡ role="alert") — przerywa bieżącą mowę. Używaj tylko dla pilnych komunikatów.

WCAG 4.1.3 (Komunikaty statusu, AA) wymaga, aby komunikaty statusu były udostępniane przez region na żywo, dzięki czemu technologie asystujące mogą je ogłaszać bez wymuszania zmiany fokusu.

Typowe błędy

Element status tworzony dynamicznie z już zawartą treścią. Wiele czytników ekranu przegapia ogłoszenie.
Aktualizowanie statusu treścią z oznaczeniami (<span> i <strong>). Niektóre czytniki ekranu odczytują znaczniki dosłownie; utrzymuj treść statusu jako zwykły tekst.
Wiele szybkich aktualizacji — późniejsze komunikaty nadpisują wcześniejsze bez ogłoszenia.
Użycie role="status" dla naprawdę pilnych błędów (użyj role="alert").
Wizualnie ukryty status bez uwzględnienia aria-atomic, gdy zawiera zarówno stałe, jak i zmieniające się części. Domyślne aria-atomic="true" w statusie odczytuje cały region przy każdej zmianie, co może być hałaśliwe.

Przykład

<!-- Renderuj pusty przy ładowaniu strony -->
<div role="status" id="cartStatus"></div>

<script>
  // Gdy koszyk się aktualizuje:
  document.getElementById('cartStatus').textContent =
    'Dodano do koszyka. 3 przedmioty, łącznie 42,00 zł.';
</script>

<!-- Natywny odpowiednik -->
<form>
  <label>a <input type="number" id="a"></label>
  <label>b <input type="number" id="b"></label>
  <output for="a b" id="sum">0</output>
</form>