Wróć do wszystkich kryteriów

2.4.11 Fokus niezasłonięty (minimum) (ang.) Focus Not Obscured (Minimum)

Specjalizacje:

  • Designer
  • Deweloper

Elementy:

  • Dialogi i warstwy
  • Nawigacja
  • Przyciski i kontrolki

Poziomy:

  • AA

Spis treści

    Istota i cel kryterium

    Głównym założeniem tego kryterium sukcesu jest zapewnienie, że użytkownik obsługujący serwis za pomocą klawiatury nigdy nie straci z oczu elementu, na którym aktualnie się znajduje. Kiedy dany komponent interaktywny otrzymuje fokus, żadna treść stworzona przez autora strony nie może go całkowicie zasłonić ani ukryć przed wzrokiem użytkownika.

    Wytyczna ta zapobiega sytuacjom, w których elementy interfejsu znikają pod pływającymi menu czy banerami. Dzięki temu nawigacja staje się przewidywalna, a osoba korzystająca z klawiatury zachowuje pełną kontrolę nad swoimi działaniami i dokładnie widzi swój aktualny punkt odniesienia.

    Pamiętaj, że na poziomie AA dopuszczalne jest częściowe przysłonięcie elementu, o ile jego kluczowa część lub wskaźnik pozostają widoczne. Niemniej jednak Twoim nadrzędnym celem powinno być całkowite unikanie nakładania się na siebie treści.

    Definicja w j. angielskim

    Definicja dostępna pod adresem (link otworzy się w nowej karcie):
    https://www.w3.org/WAI/WCAG22/quickref/#focus-not-obscured-minimum

    Słownik pojęć

    Fokus (ang.) focus
    –

    stan aktywnego wyróżnienia elementu interfejsu (takiego jak odnośnik, przycisk czy pole formularza), który wskazuje gotowość komponentu na przyjęcie akcji lub danych wprowadzanych przez użytkownika.

    Wpływ na dostępność (Kogo wspierasz?)

    • Osoby słabowidzące: Użytkownicy korzystający z powiększenia ekranowego potrzebują wyraźnych, niczym nieprzesłoniętych punktów orientacyjnych, aby sprawnie śledzić interakcje.
    • Użytkownicy z niepełnosprawnościami motorycznymi: Osoby, które ze względu na ograniczenia fizyczne rezygnują z myszy komputerowej, polegają wyłącznie na sekwencyjnym przechodzeniu tabulatorem.
    • Osoby z zaburzeniami poznawczymi: Stały, niezasłonięty wskaźnik ułatwia skupienie uwagi, redukuje dezorientację oraz zapobiega frustracji wywołanej nagłym zniknięciem aktywnego elementu.
    • Osoby korzystające z nawigacji klawiaturowej: Usunięcie problemu z niewidocznym punktem pozwala im bez przeszkód realizować operacje na stronie, bez obawy o zgubienie pozycji.

    Zasady wdrażania i wymagania techniczne

    • Kontroluj zachowanie dynamicznych kontrolek w JavaScript: Przy otwieraniu okien modalnych ((ang.) modals), rozwijaniu akordeonów czy aktywacji menu bocznego dbaj o to, aby fokus był natychmiastowo i poprawnie przenoszony do nowo otwartej, w pełni widocznej sekcji treści.
    • Zarządzaj marginesami przewijania w CSS: W przypadku stosowania stałych nagłówków lub stopek, wdróż właściwość scroll-margin (np. scroll-margin-top) na elementach docelowych linków kotwicowych. Spowoduje to, że przeglądarka podczas przewijania automatycznie pozostawi bezpieczny odstęp i nie schowa aktywnego elementu.
    • Zadbaj o właściwe rozmieszczenie warstw: Precyzyjnie operuj właściwością z-index, upewniając się, że elementy pływające (np. czaty, okienka (ang.) cookies) nie nakładają się w sposób niekontrolowany na standardową ścieżkę tabulacji.
    • Projektuj elastycznie i responsywnie: Upewnij się, że elementy stałe nie zmieniają swojego położenia w sposób, który na mniejszych ekranach (smartfony, tablety) doprowadzi do całkowitego zablokowania widoczności interaktywnych komponentów.

    Wyjątki i sytuacje szczególne

    Kryterium to przewiduje pewne specyficzne okoliczności, w których reguła pełnej widoczności komponentu nie zostaje naruszona:

    • Możliwość odsłonięcia bez zmiany fokusu: Jeżeli element zostanie przysłonięty, ale użytkownik może go łatwo odsłonić (np. poprzez przewinięcie strony klawiszami strzałek) bez konieczności przenoszenia fokusu na kolejny komponent, kryterium uznaje się za spełnione.
    • Działania zainicjowane przez użytkownika: Jeśli to sam użytkownik zmienił pozycję jakiegoś elementu na ekranie (np. przesunął ruchomy pasek narzędzi lub przeciągnął kartę) i w efekcie zasłonił komponent z fokusem, nie jest to uznawane za błąd autora. Liczy się wyłącznie pozycja wyjściowa komponentów podczas ładowania strony.
    • Kontrolki systemowe: Ograniczenie to nie obejmuje elementów generowanych bezpośrednio przez system operacyjny lub przeglądarkę, na które autor kodu nie ma żadnego wpływu.
    • Warstwy półprzezroczyste: Sytuacja, w której element znajduje się pod warstwą o niepełnym kryciu, nie oznacza całkowitego zasłonięcia. Pamiętaj jednak, że wynikowy kontrast wskaźnika fokusu musi wtedy spełniać niezależne wymagania dotyczące kontrastu komponentów nietekstowych.

    Przykłady implementacji

    Najczęstsze błędy

    • Całkowite usuwanie obramowania bez alternatywy: Zastosowanie w stylach deklaracji outline: none; bądź outline: 0; bez jednoczesnego wdrożenia innego, czytelnego i odpornego na przesłonięcia wskaźnika wizualnego.
    • F110: Błąd polegający na całkowitym ukryciu aktywnego elementu interfejsu (na który przeszedł fokus) przez stały nagłówek ((ang.) sticky header) lub stałą stopkę ((ang.) sticky footer) podczas sekwencyjnego przewijania zawartości strony.
    • Wadliwa pętla fokusu: Otwieranie okien dialogowych bez poprawnego przeniesienia punktu skupienia, co skutkuje tym, że użytkownik porusza się „w ciemno” pod warstwą aktywnego okna.
    • Pływające banery informacyjne i dymki podpowiedzi ((ang.) tooltips): Nieskoordynowane wyświetlanie dymków podpowiedzi lub komunikatów o polityce prywatności, które po automatycznej aktywacji klawiaturą przykrywają sąsiadujące, aktywne przyciski.

    Najlepsze praktyki

    • Stosuj przesunięcie i reflow treści: Zamiast nakładać nowe panele (np. paski boczne) bezpośrednio na tekst, Zaprogramuj je tak, aby po otwarciu zwężały główny obszar roboczy, powodując bezpieczne dostosowanie i przesunięcie reszty komponentów ((ang.) reflow).
    • Dąż do standardów poziomu AAA: Projektuj interfejsy w taki sposób, aby komponent w stanie fokusu nigdy nie był nawet częściowo zasłonięty, zapewniając jego stuprocentową widoczność w każdej sytuacji (zgodnie z kryterium 2.4.12).
    • Projektuj z dużym marginesem bezpieczeństwa: dodawaj dodatkową przestrzeń wokół kluczowych przycisków akcji, aby dynamiczne elementy miały mniejszą szansę wejścia z nimi w kolizję wizualną.
    • Wdrażaj komponenty harmonijkowe: Używaj struktur typu (ang.) accordion, które podczas rozwijania fizycznie odpychają pozostałą zawartość w dół ekranu, eliminując ryzyko jakiegokolwiek nakładania się warstw.

    Metody testowania

    • NVDA: Aktywuj czytnik ekranu i przemieszczaj się sekwencyjnie po stronie za pomocą klawisza Tab. Kontroluj wzrokiem, czy w momencie, gdy syntezator mowy odczytuje dany element, jego ramka fokusowa nie zniknęła pod stałym nagłówkiem lub panelem bocznym.
    • Narzędzie deweloperskie (ang.) Developer Tools: Wykorzystaj podgląd drzewa DOM oraz style CSS, aby przeanalizować zachowanie właściwości pozycjonowania stałego oraz sprawdzić obecność reguł scroll-margin zapobiegających kolizjom warstw.
    • Testowanie manualne: Przejdź całą ścieżkę nawigacji na stronie za pomocą klawiszy Tab oraz Shift + Tab (poruszając się zarówno w dół, jak i w górę dokumentu). Zwróć szczególną uwagę na zachowanie elementów w pobliżu stałych pasków oraz upewnij się, że przy maksymalnym przewinięciu żaden punkt skupienia nie staje się całkowicie niewidoczny.

    Sprawdź swoją wiedzę

    W linku poniżej znajduje się 5 przykładowych widoków reprezentujących sytuacje z nakładającymi się na siebie warstwami (przyklejone nagłówki, stopki ciasteczek, pływające czaty i okna modalne).

    Twoim zadaniem jest sprawdzenie, czy przy nawigowaniu za pomocą klawiatury fokus (ramka wokół przycisku) kiedykolwiek chowa się całkowicie pod innym elementem.

    Jak to sprawdzić?

    1. Kliknij myszą na dany blok testowy, aby „wejść” do niego.
    2. Zacznij wciskać Tab, aby przeglądarka automatycznie przewijała kolejne elementy.
    3. Sprawdź zachowanie przewijania do tyłu używając kombinacji Shift + Tab.
    4. Zadaj sobie pytanie: „Czy po wciśnięciu klawisza nadal widzę chociaż fragment mojego kursora?”. Jeśli kursor zniknął całkowicie pod paskiem – to krytyczny błąd!

    Notatka: Zanim zajrzysz do rozwiązania, przetestuj i zapisz swoje wnioski na kartce.
    Proponowane narzędzia: Klawiatura (Tab, Shift + Tab)

    Link: https://pdc.ambiscale.com/training/wcag-2-4-11/

    #1 DOBRZE

    Dlaczego: Użyto nowoczesnego selektora CSS scroll-padding-bottom równego wysokości stopki. Dzięki temu mechanizm Auto-Scroll wbudowany w przeglądarkę zostawia bezpieczny margines podczas dociągania przycisków na ekran. Fokus nigdy nie chowa się za banerem!

    #2 DOBRZE

    Dlaczego: Przycisk komunikatora czatu w prawym dolnym rogu nachodzi na duży przycisk akcji i ewidentnie zasłania jego fragment. Niemniej jednak wskaźnik fokusu (niebieska ramka) jest wciąż bez problemu widoczny z lewej strony oraz na górze przycisku. Kryterium WCAG 2.4.11 (poziom AA) dopuszcza wprost takie częściowe zasłonięcie. (Dopiero rygorystyczny poziom 2.4.12 AAA uznałby ten układ za niezgodny).

    #3 BŁĄD

    Problem: Kiedy przemieszczasz się klawiszem Tab w dół, przeglądarka podciąga kolejne przyciski, by zmieścić je w oknie. Niestety, zatrzymuje je dokładnie na dolnej krawędzi kontenera, czyli idealnie pod przyklejoną stopką (banerem).
    Dlaczego: Użytkownik nie widzi „Opcji 5”, na której aktualnie się znajduje, ponieważ wskaźnik jest w 100% zasłonięty (błąd ujęty w technice F110).
    Naprawa: Poinformuj przeglądarkę o istnieniu „martwej strefy” za pomocą deklaracji scroll-padding-bottom: 70px; na przewijanym kontenerze (zobacz Przykład 1).

    #4 BŁĄD

    Problem: Identyczna kolizja warstw, ale dotycząca górnego marginesu.
    Dlaczego: Gdy przewiniesz okno ręcznie na sam dół (ukrywając w ten sposób Opcję 1 za górnym nagłówkiem), a potem zaczniesz się po niej cofać kombinacją Shift + Tab, przeglądarka podciągnie element pod samą górę viewportu. Tam jednak „siedzi” przyklejone na stałe (position: sticky) menu, całkowicie skrywając obramowanie fokusu!
    Naprawa: Należy użyć bliźniaczej deklaracji scroll-padding-top: 70px; na ramce.

    #5 BŁĄD

    Problem: Otwarcie ciemnej nakładki alertu nie blokuje i nie zawłaszcza fokusu z klawiatury dla podłoża.
    Dlaczego: Ponieważ deweloper nie wdrożył prawidłowego przeniesienia fokusu podczas używania JavaScript, gdy naciśniesz znów Tab, twój kursor opuszcza przycisk otwierający i ląduje na „Ukrytej Opcji 1” oraz „Ukrytej Opcji 2”. Przyciski tam na dole dostają swą niebieską ramkę, ale ciemny modal absolutnie przykrywa je przed naszym wzrokiem. Kursor utknął pod powłoką „w ciemno”.
    Naprawa: Skrypt JS obsługujący modal musi przenieść fokus do jego wnętrza natychmiast po otwarciu (np. na przycisk „Zamknij”), a elementom w tle musi zostać na ten czas zablokowana interakcja (np. poprzez nowoczesny atrybut inert przypięty do całego spodu witryny).

    Źródła

    Dodatkowe linki

     

    Wróć do wszystkich kryteriów