Wyobraź sobie, że wchodzisz na stronę i próbujesz obsłużyć ją bez myszy. Naciskasz Tab. Raz, drugi, trzeci. Linki i przyciski gdzieś są, formularz też pewnie istnieje, ale nie wiadomo, co właśnie zostało zaznaczone. Klawiatura działa, tylko użytkownik porusza się po stronie trochę jak po ciemku. Mało wygodne, prawda?

Właśnie dlatego fokus klawiatury na stronie powinien być widoczny. To nie ozdobnik ani fanaberia projektanta. To prosty komunikat: „jesteś teraz tutaj”. Dotyczy linków, przycisków, pól formularzy i innych elementów, które można obsługiwać bez myszy. Poniżej znajdziesz szybki test, listę miejsc do sprawdzenia i wyjaśnienie, dlaczego usunięcie domyślnego obramowania bez sensownego zamiennika potrafi nieźle popsuć korzystanie ze strony.

Fokus klawiatury na stronie — o co w ogóle chodzi?

Fokus pokazuje, który element interfejsu jest aktualnie aktywny dla klawiatury. Gdy przechodzisz po stronie klawiszem Tab, powinieneś widzieć, czy znalazłeś się na konkretnym linku, przycisku, polu tekstowym, checkboxie albo elemencie menu. Bez zgadywania i bez liczenia w głowie, który Tab z kolei właśnie nacisnąłeś.

Dla osoby korzystającej z myszy ten problem może długo pozostać niewidoczny. Klikasz i od razu widzisz, gdzie jesteś. Nawigacja klawiaturą działa inaczej: aktywny element musi zostać wyraźnie oznaczony. Jeśli wskaźnik fokusu znika albo jest prawie niewidoczny, wzrokowy użytkownik klawiatury może nie wiedzieć, co zostanie aktywowane po naciśnięciu Enter.

Widoczny fokus jest więc częścią dostępności strony internetowej, ale także zwykłej użyteczności. WCAG 2.2 wskazuje, że dla interfejsu obsługiwanego klawiaturą powinien istnieć tryb, w którym wskaźnik fokusu jest widoczny. Nie oznacza to oczywiście, że samo obramowanie załatwia całą dostępność. Oznacza tylko tyle, że jego brak nie jest drobiazgiem, który można zbyć tekstem „u nas wszyscy używają myszy”.

Szybki test: przejdź stronę samym klawiszem Tab

Najprostszy test nie wymaga specjalnego narzędzia. Otwórz stronę w przeglądarce, kliknij w neutralne miejsce albo pasek adresu i zacznij przechodzić po elementach klawiszem Tab. Przy każdym naciśnięciu zatrzymaj się na moment i sprawdź, czy widzisz, gdzie trafił fokus.

Nie chodzi o to, żeby raz zobaczyć obramowanie przy pierwszym przycisku i uznać temat za zamknięty. Przejdź całą ścieżkę, którą może pokonać użytkownik. Sprawdź stronę główną, podstronę z ofertą, formularz kontaktowy, wyszukiwarkę i menu mobilne, jeśli występują. Jeżeli masz sklep, przejdź również przez listę produktów, filtry, koszyk oraz checkout. Właśnie tam często wychodzą problemy, których nie widać na statycznej stronie głównej.

Na co patrzeć przy każdym naciśnięciu Tab

Przy każdym kroku zadaj sobie proste pytanie: „Czy bez zgadywania wiem, który element jest teraz aktywny?”. Dobry wynik nie polega na tym, że coś mignie na ekranie. Fokus powinien być wyraźny i pozostać widoczny tak długo, żeby użytkownik zdążył go zauważyć.

• Sprawdź, czy wskaźnik pojawia się przy każdym kolejnym linku, przycisku i polu formularza.
• Zwróć uwagę, czy fokus nie robi się prawie niewidoczny na jasnym albo kolorowym tle.
• Odnotuj miejsca, w których fokus nagle znika albo przeskakuje na element, którego nie da się sensownie użyć.
• Sprawdź, czy przyklejony nagłówek, popup lub inny element interfejsu nie zasłania aktywnej kontrolki.
• Po zmianach powtórz test na kilku typach komponentów, a nie tylko na jednym przycisku.

To ręczna kontrola, nie pełny audyt. Nie wykryje wszystkich problemów z kolejnością fokusu, pułapkami klawiaturowymi, etykietami formularzy czy czytnikami ekranu. Jest jednak dobrym pierwszym krokiem, bo szybko pokazuje, czy strona w ogóle daje użytkownikowi podstawową informację o jego położeniu.

Dlaczego outline nie jest wrogiem designu

Domyślne obramowanie fokusu bywa traktowane jak coś, co psuje wygląd przycisku. Projekt jest dopracowany, kolory dobrane, a tu nagle przeglądarka dorzuca własną ramkę. Najprostsza reakcja? Usunąć outline i uznać, że problem z głowy. Tyle że razem z ramką można usunąć jedyny czytelny sygnał pokazujący, gdzie znajduje się fokus.

Po takim zabiegu użytkownik przechodzący klawiszem Tab może nie wiedzieć, który link zostanie otwarty, który przycisk zadziała albo w którym polu formularza właśnie się znalazł. Strona nadal wygląda schludnie, ale obsługa klawiaturą staje się zgadywanką. W3C i MDN wskazują usuwanie lub ukrywanie stylów fokusu bez alternatywnego oznaczenia jako częsty błąd.

Nie chodzi o to, że domyślne obramowanie zawsze musi zostać w dokładnie tej samej formie. Można przygotować własny styl, dopasowany do interfejsu. Warunek jest prosty: użytkownik nadal musi dostać wyraźną informację o aktywnym elemencie. Estetyka nie powinna polegać na wyciszeniu komunikatu, który jest potrzebny do korzystania ze strony.

Co dokładnie sprawdzić na stronie firmowej i w sklepie

Fokus trzeba sprawdzać na wszystkich elementach, które można obsługiwać klawiaturą. Nie tylko na głównym przycisku „Kontakt” czy „Kup teraz”. Strona firmowa i sklep mają różne ścieżki, ale zasada pozostaje ta sama: przechodzisz przez realne zadanie użytkownika i obserwujesz każdy aktywny element.

• Linki w menu, treści, stopce i blokach z wezwaniem do działania.
• Przyciski, w tym przyciski otwierające dodatkową treść albo zamykające okno.
• Pola tekstowe oraz pola e-mail i telefonu w formularzach.
• Checkboxy, radio buttony i listy wyboru.
• Menu rozwijane, zakładki, akordeony i wyszukiwarkę.
• Filtry, suwaki, koszyk i kontrolki używane podczas zakupów.
• Okna modalne oraz inne sterowalne komponenty pojawiające się w interfejsie.

Strona firmowa kontra sklep

Na stronie firmowej zacznij od menu, wyszukiwarki, formularza kontaktowego i wszystkich przycisków prowadzących do kolejnych kroków. Sprawdź, czy po otwarciu dodatkowego elementu fokus nie znika gdzieś poza ekranem i czy można przejść dalej bez sięgania po mysz.

W sklepie zakres jest szerszy. Przejdź przez wyszukiwanie, filtrowanie produktów, wybór wariantu, dodanie do koszyka, zmianę liczby produktów i proces checkoutu. Nie pomijaj drobnych kontrolek tylko dlatego, że wyglądają niepozornie. To właśnie z takich drobiazgów składa się cała ścieżka zakupowa. Jeśli jeden element nie pokazuje fokusu, użytkownik może utknąć albo nie mieć pewności, co właściwie wybrał.

Warto testować nie tylko stronę główną, ale też różne podstrony i stany interfejsu. Element może wyglądać poprawnie w jednym miejscu, a tracić widoczność na innym tle albo po otwarciu menu. Test ma sprawdzić działanie konkretnej strony, nie abstrakcyjną obietnicę, że „CSS jest przecież wspólny”.

Widoczny to nie zawsze wystarczająco widoczny

Samo pojawienie się jakiejś ramki nie kończy sprawdzania. Fokus może być formalnie obecny, ale tak słaby, że użytkownik praktycznie go nie zauważy. Oceń jego kontrast względem tła i elementu interfejsu. Ten sam wskaźnik może być czytelny na białym tle, a ginąć na zdjęciu, kolorowym banerze albo ciemnym przycisku.

Sprawdź też, czy aktywny element nie jest całkowicie zasłonięty przez przyklejony nagłówek, popup lub inną treść stworzoną przez autora strony. Jeśli fokus trafia pod taki element, użytkownik nie dostaje użytecznej informacji, nawet gdy technicznie wskaźnik istnieje.

Uważaj na efekty, które pokazują fokus tylko przez krótką chwilę. Wskaźnik nie powinien znikać dlatego, że minął określony czas. Użytkownik musi mieć możliwość spokojnego rozpoznania miejsca, w którym się znajduje.

Warto też rozdzielić poziomy wymagań. Widoczny fokus opisany w kryterium 2.4.7 WCAG 2.2 ma poziom AA. Kontrast elementów nietekstowych i brak całkowitego zasłonięcia fokusu również są osobnymi obszarami do sprawdzenia. Z kolei kryterium 2.4.13 Focus Appearance ma poziom AAA, więc nie należy przedstawiać go jako identycznego, podstawowego minimum AA dla każdej strony.

Jak poprawić fokus bez rozwalania wyglądu strony

Najbezpieczniejszy kierunek jest prosty: jeśli domyślny styl fokusu jest czytelny, nie usuwaj go tylko dlatego, że nie pasuje do makiety. Jeśli projekt wymaga zmiany, zastąp go własnym, wyraźnym oznaczeniem. Nie ma jednego uniwersalnego koloru, grubości ani odstępu, który będzie dobry dla każdej strony. Trzeba sprawdzić konkretne tło, komponent i jego stan.

W warstwie technicznej można wykorzystać pseudo-klasę CSS :focus-visible, która pozwala stylować fokus z uwzględnieniem sposobu interakcji, na przykład nawigacji klawiaturą. To narzędzie, nie magiczna różdżka. Samo jego użycie nie zapewnia pełnej dostępności. Po wdrożeniu trzeba ponownie przejść linki, przyciski, formularze, menu i elementy sklepu.

Dobra poprawka nie polega na ukryciu problemu pod ładniejszą ramką. Polega na tym, że użytkownik nadal od razu wie, gdzie jest, a wygląd interfejsu nie traci spójności.

Kiedy zwykły test nie wystarczy

Test Tab jest dobrym początkiem, ale nie zastępuje pełnego sprawdzenia dostępności. Nie pokaże wszystkich problemów z kolejnością fokusu, pułapkami klawiaturowymi, etykietami formularzy ani działaniem z czytnikiem ekranu. Widoczny fokus jest jednym z elementów dostępnego interfejsu, nie certyfikatem, że cała strona działa bez zarzutu.

Najważniejszy wniosek? Fokus klawiatury na stronie powinien być widoczny, czytelny i niezasłonięty. Usunięcie outline bez dobrego zamiennika zwykle nie porządkuje designu, tylko zamiata problem pod dywan. Zacznij od przejścia strony klawiszem Tab, sprawdź pełne ścieżki użytkownika i popraw miejsca, w których aktywny element znika. Masz stronę, sklep albo materiały graficzne, które proszą się o ogarnięcie? Napisz do INB Marketing i zobaczymy, co da się z tym sensownie zrobić.