Kryterium 4.1.3 – Status komponentu (Poziom AA) zostało wprowadzone w wersji WCAG 2.1. Dotyczy ono sytuacji, w których zmiany na stronie następują automatycznie – np. po zaznaczeniu opcji w formularzu, wysłaniu danych lub załadowaniu nowej treści.
To kryterium ma na celu informowanie użytkowników o tych zmianach, zwłaszcza korzystających z czytników ekranu, aby nikt nie został zdezorientowany brakiem widocznego sygnału.
W tym artykule pokażemy, jak sprawdzić zgodność z tym kryterium – bez potrzeby znajomości kodu.
Co oznacza „status komponentu”?
Status komponentu to każda zmiana na stronie, która:
-
następuje bez przeładowania strony,
-
ma znaczenie dla użytkownika (np. pojawia się komunikat, zmienia się stan przycisku, zostaje dodana nowa informacja).
Dla użytkowników czytników ekranu ważne jest, żeby te zmiany były zakomunikowane głosowo. W przeciwnym razie – mogą ich nie zauważyć.
Przykłady typowych statusów:
-
Komunikat: „Formularz został wysłany pomyślnie”.
-
Zmiana stanu przycisku na „Wysłano”.
-
Informacja o błędzie: „Nie udało się połączyć z serwerem”.
-
Dodanie nowego produktu do koszyka bez przeładowania strony.
-
Ładowanie wyników wyszukiwania po wpisaniu hasła.
Jak sprawdzić zgodność z kryterium 4.1.3 bez technicznej wiedzy?
1. Użyj czytnika ekranu i wykonaj akcje dynamiczne
Co zrobić?
Zainstaluj darmowy czytnik ekranu (np. NVDA na Windowsie) lub skorzystaj z wbudowanego (np. VoiceOver na macOS).
Na co zwrócić uwagę?
-
Czy po wykonaniu akcji (np. kliknięciu przycisku) usłyszysz komunikat o zmianie?
-
Czy nowa treść (np. informacja o błędzie lub sukcesie) jest czytana automatycznie?
-
Czy musisz ręcznie wyszukiwać zmian, czy są one oczywiste?
Przykład błędu:
Po kliknięciu „Dodaj do koszyka” nic nie zostaje odczytane przez czytnik – użytkownik nie wie, czy akcja się powiodła.
2. Przetestuj dynamiczne formularze i komunikaty
Co zrobić?
Wypełnij formularz, użyj wyszukiwarki na stronie, dodaj produkt do koszyka itp.
Na co zwrócić uwagę?
-
Czy pojawiają się komunikaty tekstowe?
-
Czy użytkownik bez wzroku ma szansę się o nich dowiedzieć?
-
Czy komunikaty pojawiają się natychmiast po akcji?
Dlaczego to ważne?
Bez informacji o zmianie statusu, użytkownik może nie wiedzieć, czy jego działanie miało efekt.
To szczególnie istotne dla:
-
osób niewidomych,
-
osób słabowidzących,
-
osób korzystających z technologii wspomagających (czytniki ekranu, linijki brajlowskie).
Dobre praktyki
-
Komunikaty o zmianie (sukces, błąd, wynik, stan) powinny być czytelne i widoczne.
-
Używaj komunikatów na żywo – np. z pomocą atrybutów
aria-live,aria-atomic,role="status". -
Nie polegaj wyłącznie na kolorze lub ikonach – dodaj też tekst.
Podsumowanie
Kryterium 4.1.3 – Status komponentu sprawia, że dynamiczne zmiany na stronie są dostępne również dla osób korzystających z czytników ekranu.
Nie musisz znać kodu – wystarczy, że wykonasz prosty test i sprawdzisz, czy zmiany są zauważalne i zrozumiałe.