zbyt dynamiczne zmiany (np. popup bez focus trap)

Zbyt dynamiczne zmiany, np. popup bez focus trap, utrudniają nawigację osobom korzystającym z klawiatury.

Gdy interfejs zmienia się szybciej niż położenie fokusu

Zbyt dynamiczne zmiany w interfejsie występują wtedy, gdy aplikacja nagle otwiera popup, przełącza widok, wstawia nowe elementy albo usuwa aktualnie aktywny przycisk bez przewidywalnego przekazania fokusu. Użytkownik poruszający się klawiszem Tab może wtedy znaleźć się w nieoczekiwanym miejscu dokumentu, a osoba korzystająca z czytnika ekranu może usłyszeć komunikat niezwiązany z elementem, który właśnie wywołała. Problem nie polega na samej animacji czy zmianie wyglądu, lecz na braku spójnej relacji między akcją użytkownika, stanem interfejsu i pozycją fokusu klawiatury.

Przykładem jest przycisk „Zaloguj”, który otwiera okno dialogowe, ale pozostawia aktywny element w tle. Kolejne naciśnięcie Tab może przenieść fokus do pól strony znajdujących się za popupem. Użytkownik nadal widzi zasłonięte okno, lecz klawiatura steruje elementami, których nie może odczytać ani obsłużyć. Odwrotna sytuacja także jest błędna: skrypt może przenieść fokus do popupu bez wyraźnego powodu, przez co użytkownik traci orientację i nie wie, dlaczego zmienił się odczytywany fragment strony.

Focus trap w oknie dialogowym i poprawny cykl obsługi klawiatury

Modalne okno dialogowe powinno mieć jednoznacznie określony charakter. W HTML można użyć elementu <dialog> otwieranego metodą showModal(), a w rozwiązaniach opartych na innych elementach należy prawidłowo zastosować między innymi role="dialog" lub role="alertdialog". Atrybut aria-modal="true" informuje technologie asystujące, że użytkownik ma pracować w obrębie aktywnego dialogu. Okno powinno mieć nazwę dostępną przez aria-labelledby wskazujące jego nagłówek albo przez aria-label, jeżeli osobny nagłówek nie występuje.

Focus trap oznacza kontrolowane zatrzymanie nawigacji klawiaturą wewnątrz otwartego dialogu modalnego. Fokus powinien zostać ustawiony na pierwszym sensownym elemencie, takim jak pole formularza, nagłówek z możliwością fokusu albo przycisk zamknięcia. Naciśnięcie Tab na ostatnim dostępnym elemencie powinno przenieść fokus na pierwszy, a kombinacja Shift+Tab na pierwszym powinna przejść na ostatni. Klawisz Escape powinien zamykać dialog, jeśli jego funkcja nie wymaga dodatkowego potwierdzenia. Po zamknięciu fokus należy przywrócić do elementu, który otworzył popup, o ile ten element nadal istnieje i może otrzymać fokus. Takie zachowanie ogranicza ryzyko powstania pułapki klawiaturowej opisanej w WCAG 2.2 jako kryterium 2.1.2.

Dynamiczne komunikaty, kolejność DOM i testowanie bez myszy

Nie każda zmiana treści wymaga przeniesienia fokusu. Jeżeli aplikacja pokazuje krótką informację, na przykład „Plik zapisano”, komunikat może zostać przekazany przez region live, taki jak aria-live="polite", bez przerywania bieżącej pracy. Informacje pilne mogą korzystać z aria-live="assertive", ale ten mechanizm należy stosować oszczędnie, ponieważ natychmiastowy komunikat może przerwać odczyt wykonywany przez czytnik ekranu. Dla statusów i wyników operacji znaczenie ma także WCAG 2.2, kryterium 4.1.3 dotyczące komunikatów o stanie.

Podczas sprawdzania interfejsu trzeba wykonać pełny scenariusz wyłącznie z klawiaturą: otworzyć popup, przejść przez wszystkie kontrolki klawiszem Tab, cofnąć się przez Shift+Tab, zamknąć okno klawiszem Escape i sprawdzić miejsce powrotu fokusu. Należy też odświeżyć stronę z aktywnym formularzem, wywołać błędną walidację, otworzyć kilka dialogów kolejno oraz sprawdzić, czy usunięcie elementu nie pozostawia fokusu na niewidocznym węźle. W narzędziach deweloperskich warto obserwować właściwość document.activeElement i porównywać ją z widocznym stanem aplikacji. Test powinien objąć powiększenie strony, tryb wysokiego kontrastu dostępny w systemie oraz co najmniej jeden czytnik ekranu, ponieważ sam wzrokowy test z myszą nie ujawnia błędnej kolejności fokusu.

Naprawa zachowania popupu w laptopie lub komputerze PC

Usunięcie problemu zwykle wymaga prześledzenia obsługi zdarzeń otwierania i zamykania komponentu. Kod powinien zapamiętać element wywołujący, nadać dialogowi prawidłową nazwę, ograniczyć dostęp do tła oraz ustawić fokus dopiero po umieszczeniu popupu w aktywnym drzewie dokumentu. Trzeba również obsłużyć przypadek, w którym element wywołujący został usunięty lub stał się niedostępny. Wtedy fokus powinien trafić do logicznego miejsca zastępczego, na przykład nagłówka sekcji albo głównego kontenera strony, zamiast pozostać na ukrytym elemencie.

Warszawskie Pogotowie Komputerowe zajmuje się profesjonalną naprawą laptopów, komputerów PC i ich podzespołów, a przy diagnozie problemów z aplikacją może sprawdzić także działanie klawiatury, sterowników wejścia oraz zgodność interfejsu z używanym środowiskiem systemowym. W praktyce warto odróżnić usterkę sprzętową, taką jak nie działający klawisz Tab lub Escape, od błędu programu, w którym fokus jest przenoszony do niewłaściwego miejsca. Dopiero po takim rozdzieleniu można ustalić, czy potrzebna jest naprawa urządzenia, korekta konfiguracji, czy poprawa kodu odpowiedzialnego za popup i dynamiczne zmiany treści.