DOSTĘPNOŚĆ ≠ OVERLAY · 38
Widoczny fokus klawiatury, gdy stały nagłówek zasłania kolejny krok
📅 11 listopada 2026 · ⏱ 5 min czytania
Po naciśnięciu Tab przeglądarka może przenieść fokus na kontrolkę znajdującą się za stałym nagłówkiem. Strona nadal reaguje, ale osoba traci wskazówkę wzrokową potrzebną do dalszego działania.
01. Rezerwacja jako zadanie testowe
Otwórz stronę rezerwacji i wybierz termin klawiaturą. Po naciśnięciu Tab oczekujesz linku wyjaśniającego zmiany lub przycisku do przejścia dalej. Dokument przesuwa się o kilka pikseli, a obrys znika. Fokus trafił na właściwą kontrolkę, lecz nagłówek pozostający u góry ją zasłania. Naciśnięcie Enter może zmienić etap, zanim uda się zobaczyć, które działanie zostanie uruchomione.
Łatwo przeoczyć tę sytuację przy sprawdzaniu projektu myszą. Wskaźnik pokazuje wybraną pozycję i pozwala przesunąć stronę przed działaniem. W przypadku klawiatury przeglądarka przesuwa fokus zgodnie z kolejnością i sama decyduje o przewijaniu. Podczas testu zachowaj tę sekwencję. Ręczne przewinięcie strony przed obserwacją może ukryć błąd, który próbujesz odtworzyć. Sprawdź stronę w stanie typowym dla odwiedzającego i zacznij od tego samego miejsca przy każdym powtórzeniu.
02. Rozróżnij fokus, wskaźnik i kolejność
Fokus oznacza element odbierający polecenia klawiatury. Wskaźnik to widoczny sygnał pozwalający go odnaleźć. Kolejność określa następną kontrolkę. Nakładający się nagłówek może zasłonić przycisk z dobrze zaprojektowanym obrysem. Przycisk może też pozostać widoczny bez sygnału po otrzymaniu fokusu. Wyraźnie zaznaczona kontrolka może ponadto pojawić się w nieoczekiwanym momencie zadania.
Zapisz oczekiwaną kontrolkę oraz tę, która rzeczywiście otrzymuje fokus. Jeżeli korzystasz z narzędzi przeglądarki, przygotuj inspektor wcześniej albo zbadaj aktywny element bez zmiany fokusu strony. Porównaj obszar kontrolki z obszarem nakładającej się warstwy. Zrzut ekranu pokazuje objaw. Kroki klawiaturowe i stan komponentu pozwalają go odtworzyć. Oddziel opis faktycznego przebiegu od hipotezy o przyczynie, żeby kolejna osoba mogła niezależnie sprawdzić obie rzeczy.
03. Co wymagają WCAG 2.2
Kryterium 2.4.7 na poziomie AA dotyczy widoczności wskaźnika fokusu. Kryterium 2.4.11, również AA, sprawdza, czy element z fokusem nie zostaje całkowicie zasłonięty przez treść utworzoną przez twórcę strony. Oceń te kwestie osobno. Widoczny fragment przycisku może oznaczać brak całkowitego zasłonięcia, a mimo to utrudniać zrozumienie działania.
Kryterium 2.4.12 na poziomie AAA obejmuje zasłonięcie częściowe. Jako cel projektowy przyjmij widoczność całej kontrolki i jej wskaźnika. Kryterium 2.4.3 na poziomie A dotyczy kolejności zachowującej znaczenie i możliwość obsługi, gdy sekwencja ma na nie wpływ. Stały nagłówek może powodować niespełnienie jednego wymagania przy spełnieniu pozostałych. Opisz w raporcie zaobserwowane zachowanie i wskaż odpowiednie kryterium. Przy zgłoszeniu uwzględnij także położenie kontrolki w momencie otrzymania fokusu.
04. Znajdź warstwę zajmującą przestrzeń
Stały nagłówek może zmieniać wysokość podczas przewijania, otwierania menu lub zwężania okna. Dolny komunikat, pasek działań albo panel pomocy mogą zająć kolejną część ekranu. Każdy komponent może działać osobno, ale razem pozostawiają mało miejsca. Liczy się rzeczywista wysokość w stanie, w którym występuje problem.
Sprawdź, który kontener się przewija. Na prostej stronie jest to zwykle dokument. W aplikacji może to być wewnętrzny panel z własnym przewijaniem i paskiem narzędzi. Ustawienie na dokumencie nie zawsze dociera do panelu. Wyłącz na próbę stałe położenie w inspektorze i powtórz tę samą sekwencję. Jeśli kontrolka znów jest widoczna, masz konkretną hipotezę do sprawdzenia w szablonie. Zwróć uwagę, czy problem występuje przy aktywnym jednym pasku, czy dopiero przy ich połączeniu.
05. Zarezerwuj miejsce w przewijanym kontenerze
Jednym z rozwiązań jest ustawienie scroll-padding-block-start na przewijanym kontenerze z uwzględnieniem wysokości nagłówka. Dla paska pozostającego na dole rozważ scroll-padding-block-end. Technika C43 W3C pokazuje połączenie odstępu przewijania z faktycznym miejscem w układzie, aby ostatni element mógł wysunąć się zza paska. Sprawdź początek i koniec ścieżki, ponieważ przewijanie ma ograniczenia.
Wysokość skopiowana z wersji komputerowej może nie wystarczyć, gdy menu zajmuje dwa wiersze. Użyj wartości odpowiadających stanom szablonu i przetestuj zmianę rozmiaru. W niskim oknie czasem lepiej pozwolić warstwie przewijać się razem z treścią. Sprawdź automatyczne przewijanie przy zmianie fokusu i linki wewnątrz strony. Oba mechanizmy mogą umieszczać treść tuż obok nagłówka. Powtórz próbę również po rozwinięciu menu.
06. Zadbaj o widoczny wskaźnik w każdym stanie
Zachowaj wskaźnik przeglądarki lub zaprojektuj taki, który odróżnia się od rzeczywistych teł w serwisie. Obrys czytelny na białej karcie może zniknąć na granatowym menu. Testuj główne przyciski, linki tekstowe, ikony i pola. Sprawdź stany zwykły i odwiedzony oraz kontrast w miejscu występowania każdej kontrolki.
Selektor CSS :focus-visible pozwala zastosować styl, gdy przeglądarka uzna, że wskaźnik powinien się pojawić. Nie usuwaj obrysów globalnie bez sprawdzonego zamiennika. Sprawdź kontenery przycinające obrys za pomocą overflow oraz nakładające się moduły. Jeśli kontrolka wyróżnia się wyłącznie pod wskaźnikiem myszy, wróć do klawiatury i sprawdź, który stan jest stylizowany przez motyw. Podczas próby odsuń wskaźnik od kontrolki, żeby efekt najechania nie wpłynął na obserwację.
07. Sprawdź oba kierunki oraz powiększenie
Zacznij od odtwarzalnego stanu. Zapisz przeglądarkę, rozmiar okna i powiększenie. Przechodź naprzód klawiszem Tab, a wstecz kombinacją Shift+Tab. Obserwuj kontrolki w chwili otrzymania fokusu. Sprawdź górną i dolną krawędź oraz ostatni element panelu. Niektóre warstwy zasłaniają treść tylko przy cofaniu, kiedy przeglądarka przewija w przeciwnym kierunku.
Powtórz z rozwiniętym nagłówkiem, zamkniętym menu i komunikatami typowymi dla pierwszej wizyty. W wąskim lub powiększonym oknie tekst może zawijać się i zmniejszać dostępną wysokość. Krótkie nagranie sekwencji odróżnia skok przewijania od zmiany fokusu. Oczekiwany wynik jest konkretny. Osoba identyfikuje bieżącą kontrolkę przed podjęciem decyzji o jej aktywacji. Sprawdź także drogę powrotną do wcześniej użytego pola.
W zgłoszeniu zapisz również, czy element był zasłonięty w całości, czy widoczna pozostała jego część. Podaj nazwę i położenie warstwy oraz stan menu. Sprawdź, czy po przesunięciu strony bez zmiany fokusu element wraca do widoku. W ten sposób zespół może ocenić dokładny wpływ usterki i odróżnić ją od problemu z kolejnością lub niewystarczającym kontrastem wskaźnika.
08. Popraw szablon Divi i ponów próbę
W WordPressie ustal, czy nagłówek pochodzi z motywu, szablonu Theme Buildera czy modułu pozostającego w stałej pozycji. Znajdź ustawienie wysokości i regułę przewijania. Popraw komponent powodujący nakładanie i sprawdź strony, które go wykorzystują. Uwzględnij długą stronę, formularz i ścieżkę z nawigacją wewnętrzną.
Nakładka może oferować ustawienia prezentacji. Wymiary nagłówka, kolejność fokusu i zarezerwowane miejsce wynikają z implementacji strony. Automat może wskazać niektóre błędy. Weryfikację zamyka ponowna rezerwacja klawiaturą, widoczność kolejnych elementów we właściwym momencie i możliwość cofnięcia się bez utraty orientacji. Zapisz wynik wraz z pierwotnymi krokami, aby po zmianie szablonu móc powtórzyć próbę w porównywalnych warunkach. Sprawdzenie wspólnego komponentu daje podstawę do zweryfikowania wszystkich stron, które z niego korzystają.