aria-live

Kiedy używać

Gdy jakaś część strony aktualizuje się asynchronicznie i chcesz, żeby użytkownicy czytników ekranu o tym wiedzieli bez przerywania tego, co aktualnie czytają. Podsumowania walidacji formularzy, liczniki wyników wyszukiwania, powiadomienia toast, wiadomości w strumieniu czatu i liczniki koszyka zakupów to typowe przypadki.

Poziom grzeczności wybieraj świadomie:

• aria-live="polite" — poczekaj aż użytkownik będzie bezczynny przed ogłoszeniem. Używaj tego do prawie wszystkiego. Komunikaty statusu, załadowane wyniki, artykuł dodany do koszyka.
• aria-live="assertive" — przerwij użytkownikowi natychmiast. Zarezerwuj dla naprawdę pilnych informacji — sesja wygasa za 30 sekund, wysyłanie formularza nie powiodło się, płatność odrzucona. Nadużywanie sprawia, że strona staje się nieprzyjemna.
• aria-live="off" (wartość domyślna) — brak ogłoszeń.

Natywne role role="status" (niejawne polite) i role="alert" (niejawne assertive) łączą aria-live z sensownymi wartościami domyślnymi. Preferuj je gdy pasują; sięgaj po aria-live na niestandardowym kontenerze gdy nie pasują.

Jak utrzymać synchronizację

Kluczowa zasada: region live musi być w DOM przy początkowym renderowaniu. Przeglądarki i technologie asystujące ustawiają „obserwację” regionu, gdy pojawia się on po raz pierwszy w drzewie dostępności. Jeśli stworzysz region i wstrzykniesz do niego treść w tej samej operacji JavaScript, ogłoszenie jest często pomijane.

Wzorzec jest następujący:

<div id="status" aria-live="polite"></div>

Wyrenderuj pusty kontener przy załadowaniu strony. Później wpisz do niego tekst przez JavaScript. Czytnik ekranu ogłosi zmianę.

Inne zasady:

• Aktualizuj przez ustawienie textContent; zastępowanie całego zewnętrznego HTML regionu może zerwać obserwację.
• Powtarzające się ogłoszenia wymagają zmiany treści — dwukrotne wpisanie tego samego ciągu często nie powoduje drugiego ogłoszenia. Dodaj licznik, znacznik czasu lub krótko wyczyść region.
• Paruj z aria-busy="true" podczas wieloetapowych aktualizacji, żeby uniknąć częściowych ogłoszeń.
• Paruj z aria-atomic żeby kontrolować, czy ogłaszana jest różnica czy cały region.

Typowe błędy

• Tworzenie regionu live w tej samej operacji co treść — brak ogłoszenia.
• Używanie aria-live="assertive" do wszystkiego. Użytkownicy wyciszają kartę.
• Ustawianie aria-live na fokusowalnej kontrolce. Regiony live służą do aktualizacji statusu, nie do interaktywnych widgetów.
• Ukrywanie regionu live przez display: none. Regiony ukryte CSS są też ukryte w drzewie dostępności i nie generują ogłoszeń; zamiast tego stosuj technikę visually-hidden (clip / sr-only).
• Wstrzykiwanie bardzo długiej treści (akapitów tekstu) do regionu live naraz — użytkownik nie może jej przejrzeć.
• Zapominanie o wyczyszczeniu regionu po przeczytaniu komunikatu, przez co kolejne identyczne aktualizacje nie generują ogłoszenia.

Przykład

<form>
  <label for="zip">Kod pocztowy</label>
  <input id="zip" name="zip" />
  <button type="submit">Wyszukaj</button>
</form>

<!-- Zawsze obecny od początku renderowania -->
<div id="lookup-status" aria-live="polite" class="sr-only"></div>

<script>
  document.querySelector('form').addEventListener('submit', async (e) => {
    e.preventDefault();
    const status = document.getElementById('lookup-status');
    status.textContent = 'Wyszukiwanie lokalizacji…';
    const place = await lookup(document.getElementById('zip').value);
    status.textContent = `Lokalizacja: ${place}`;
  });
</script>