Dlaczego regiony live zawodzą i jak to naprawić

Regiony live wyglądają na proste, ale często zawodzą. Znajomość typowych pitfalls pozwala zaoszczędzić wiele godzin na niejasnych testach z użyciem prawdziwego czytnika ekranu. 🐛

Jeśli tworzysz region i jego tekst w tym samym momencie, wiele czytników go nie wykryje. Region musi istnieć jako pusty przed wprowadzeniem zmiany.

Podczas ładowania strony dodaj pusty container live, a później zaktualizuj jego zawartość. Czytnik ekranu będzie już wtedy go obserwował.

Dwukrotne wpisanie tego samego ciągu często powoduje silence, ponieważ czytnik nie widzi żadnej zmiany. Często dotyczy to powtarzających się liczników i statusów.

Wyczyść region, a następnie ustaw nowy tekst w następnym cyklu. Krótkie wyzerowanie sprawia, że czytnik traktuje go jako nowe ogłoszenie.

Aktualizacja regionu ogromnym blokiem tekstu zalewa użytkownika informacjami. Regiony live służą do krótkich updates, a nie do wyświetlania całej zawartości strony.

Ustaw aria-atomic na true, aby czytnik odczytywał cały region przy każdej zmianie, a nie tylko zaktualizowany fragment. Jest to przydatne w przypadku połączonych komunikatów.

Atrybut aria-relevant określa, które rodzaje zmian mają być ogłaszane, na przykład dodania lub usunięcia. Wartość domyślna, obejmująca dodania i tekst, pasuje do większości przypadków.

Region ukryty za pomocą display none zostaje usunięty z drzewa dostępności i pozostaje cichy. To jeden z najczęstszych błędów.

Narzędzia inspekcji przeglądarki nie potwierdzą, że region działa. Przed wdrożeniem zawsze sprawdź go za pomocą prawdziwego screen readera, takiego jak NVDA lub VoiceOver.

Ten sam region live może brzmieć inaczej w różnych screen readerach i przeglądarkach. Przetestuj kilka kombinacji zamiast ufać tylko jednej.

Potrafisz już diagnozować problemy z regionami live: najpierw wyrenderuj pusty region, przy powtórzeniach wyczyść go i ustaw wartość ponownie, unikaj display none i zawsze testuj z prawdziwym czytnikiem. ✅