Informowanie o toastach, loaderach i licznikach
Spraw, aby asynchroniczne zmiany interfejsu były słyszalne.
Informowanie o toastach, loaderach i licznikach to bezpłatna lekcja Web Accessibility Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Web Accessibility Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Web Accessibility Academy zawiera 4 lekcji w sumie.
Asynchroniczny interfejs potrzebuje głosu
Toasty, wskaźniki ładowania i liczby wyników zmieniają stronę bez jej ponownego wczytywania. Bez live regionu użytkownicy czytników ekranu całkowicie je przegapią.
Toasty powinny być ogłaszane
Toast to krótki komunikat w wyskakującym oknie. Nadaj jego kontenerowi rolę status, aby czytnik ekranu odczytał tekst, gdy się pojawi. 🍞
<div role="status">Item added to cart</div>Nie usuwaj regionu toasta
Podczas ładowania strony wyrenderuj jeden pusty region toasta, a następnie wstawiaj do niego komunikaty. Tworzenie za każdym razem nowego regionu często uniemożliwia jego ogłoszenie.
<div id="toasts" role="status"></div>Wskaźniki ładowania informują o oczekiwaniu
Gdy dane są ładowane, poinformuj o tym użytkownika. Uprzejmy komunikat status, taki jak Loading results, sprawia, że użytkownik wie, co się dzieje, zamiast zgadywać. ⏳
out.textContent = 'Loading results';Następnie ogłoś zakończenie
Po zakończeniu ładowania zaktualizuj ten sam region, podając wynik. Połączenie komunikatu o rozpoczęciu i zakończeniu daje użytkownikowi jasny obraz postępu.
out.textContent = 'Results loaded';Ogłaszaj liczbę wyników
Po wyszukiwaniu lub filtrowaniu podaj, ile elementów pasuje. Krótki komunikat z count pomaga zorientować się użytkownikom, którzy nie mogą wizualnie przeglądać strony.
out.textContent = '12 results found';Liczby są lepsze niż cisza
Aktualizacja listy wyników bez komunikatu count pozostawia użytkowników czytników ekranu w niepewności, czy cokolwiek się zmieniło. Wystarczy jedna wypowiedziana liczba.
Twórz krótkie komunikaty
Ogłoszenia live przerywają tok czytania, dlatego każdy message powinien być zwięzły. Saved jest lepsze niż Your changes were successfully saved just now.
Spraw, aby każda aktualizacja była inna
Jeśli nowy tekst jest identyczny ze starym, niektóre czytniki ekranu pozostają silent. Zmień sformułowanie albo najpierw wyczyść region, aby wymusić ponowne odczytanie.
Nie ukrywaj za pomocą display none
Region live ustawiony jako display none nie zostanie ogłoszony. Aby ukryć go wizualnie, użyj klasy visually-hidden, która zachowuje go w drzewie dostępności.
Jeden region, wiele komunikatów
Zwykle wystarczy jeden uprzejmy region dla toastów i liczników w całej aplikacji. Kieruj przez niego aktualizacje zamiast rozmieszczać wiele elementów live.
Szybkie sprawdzenie
Twój region toasta nigdy niczego nie ogłasza. CSS ukrywa go za pomocą display none. Jakie rozwiązanie jest najbardziej prawdopodobne?
Podsumowanie: ogłaszanie asynchronicznego interfejsu
Nauczyłeś się przekazywać informacje o toastach, wskaźnikach ładowania i licznikach przez stały, uprzejmy region, utrzymywać krótkie komunikaty i nigdy nie używać display none. ✅
Często zadawane pytania
Czy lekcja „Informowanie o toastach, loaderach i licznikach” jest bezpłatna?
Tak — pełny tekst „Informowanie o toastach, loaderach i licznikach” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Web Accessibility Academy, przejdź na CoddyKit PRO. Kurs Web Accessibility Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Informowanie o toastach, loaderach i licznikach”?
Spraw, aby asynchroniczne zmiany interfejsu były słyszalne. Ćwiczysz Web Accessibility Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Web Accessibility Academy?
Nie wymagamy żadnego doświadczenia. Web Accessibility Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.
Ile czasu zajmuje lekcja „Informowanie o toastach, loaderach i licznikach”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Web Accessibility Academy?
Tak. Każda lekcja Web Accessibility Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- polite a assertive: wybór pilności
- Role status, alert i log
- Informowanie o toastach, loaderach i licznikach
- Dlaczego regiony live zawodzą i jak to naprawić