Sterowanie stroną bez myszki: test klawiatury, focus i skróty w praktyce

Jeżeli strony nie da się obsłużyć bez myszki, to nie jest drobny problem UX. To realna bariera w menu, formularzu, koszyku i kontakcie. Użytkownik może korzystać z klawiatury, czytnika ekranowego, przełącznika, laptopa bez touchpada albo po prostu chcieć szybko przejść przez stronę skrótami.

Test jest prosty: odłóż myszkę, odśwież stronę i przejdź przez najważniejsze zadania klawiszami Tab, Shift+Tab, Enter, Spacja, Escape i strzałkami. Jeśli nie wiesz, gdzie jesteś, albo nie możesz aktywować elementu, strona wymaga poprawki.

Co musi działać bez myszki?

Obszar	Co sprawdzić?	Typowy błąd
Menu	Czy da się wejść w linki, podmenu i wrócić?	Podmenu otwiera się tylko po hoverze.
CTA i przyciski	Czy Enter lub Spacja aktywuje element?	Klikalny div bez roli przycisku.
Formularz	Czy kolejność pól jest logiczna?	Focus skacze w złej kolejności albo znika.
Modal i popup	Czy Escape zamyka okno, a focus zostaje w modalu?	Użytkownik trafia w tło strony i nie wie, gdzie jest.
Koszyk lub rezerwacja	Czy da się przejść cały proces bez kliknięcia myszką?	Element wyboru działa tylko dotykowo lub tylko myszką.

Szybki test klawiatury

1. Otwórz stronę w nowym oknie i nie dotykaj myszki.
2. Naciśnij Tab. Pierwszy aktywny element powinien być widoczny.
3. Przejdź przez menu, główne CTA, treść, formularz i stopkę.
4. Użyj Shift+Tab, żeby cofnąć się i sprawdzić kolejność.
5. Aktywuj linki Enterem, przyciski Enterem lub Spacją.
6. Jeżeli jest modal, otwórz go, zamknij Escape i sprawdź, gdzie wraca focus.
7. Zapisz miejsca, w których focus znika, kolejność jest nielogiczna albo element nie działa.

Widoczny focus to nie dekoracja

Focus pokazuje użytkownikowi, który element jest aktywny. Usuwanie obramowania CSS bez zamiennika to częsty błąd. Jeżeli projekt nie lubi domyślnej ramki, można zrobić własny styl: wyraźny, kontrastowy i widoczny na różnych tłach.

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 3px;
}

Checklist napraw

• Interaktywne elementy są prawdziwymi linkami lub przyciskami, nie przypadkowymi divami.
• Kolejność focusu odpowiada układowi wizualnemu i logice zadania.
• Nie ma pułapek focusu poza kontrolowanymi modalami.
• Modal po zamknięciu oddaje focus do elementu, który go otworzył.
• Komunikaty błędów formularza są czytelne i powiązane z polami.
• Automatyczne karuzele można zatrzymać albo ominąć.
• Na mobile i desktopie aktywny element jest widoczny.

Jak odróżnić błąd techniczny od drobnej niedogodności?

Sytuacja	Priorytet	Dlaczego?
Nie da się wysłać formularza bez myszki.	Wysoki	Blokuje kontakt i konwersję.
Focus jest słabo widoczny w stopce.	Średni	Utrudnia nawigację, ale zwykle nie blokuje głównej ścieżki.
Slider nie reaguje na klawiaturę.	Średni lub wysoki	Zależy, czy slider zawiera ważną treść lub ofertę.
Podmenu działa tylko hoverem.	Wysoki	Może odciąć użytkownika od całych sekcji strony.

Focus trap: kiedy jest dobry, a kiedy szkodzi?

Pułapka focusu jest potrzebna w modalu, ale tylko wtedy, gdy działa świadomie. Po otwarciu okna focus powinien trafić do modala, poruszać się po jego elementach i wrócić do przycisku otwierającego po zamknięciu. Jeśli focus ucieka w tło, użytkownik może aktywować elementy, których nie widzi. Jeśli nie da się wyjść Escape, modal staje się blokadą.

Źle zrobione popupy newsletterowe są klasycznym przykładem. Na ekranie widać okno, ale Tab przechodzi po linkach w stopce pod spodem. Albo odwrotnie: focus zostaje w oknie, ale nie można dojść do przycisku zamknięcia. Obie sytuacje są do wykrycia w minutę testem klawiatury.

Najważniejsze skróty, które warto obsłużyć

Klawisz	Oczekiwane działanie	Gdzie szczególnie ważne?
Tab	Przejście do następnego elementu.	Menu, formularze, karty produktów.
Shift+Tab	Powrót do poprzedniego elementu.	Checkout, długie formularze.
Enter	Aktywacja linku lub przycisku.	CTA, wyniki wyszukiwania, paginacja.
Spacja	Aktywacja przycisku, checkboxa lub przełącznika.	Filtry, zgody, ustawienia.
Escape	Zamknięcie modala, menu lub podpowiedzi.	Popupy, koszyk boczny, wyszukiwarka.

Co zapisać w raporcie z testu?

Raport nie musi być długi. Wystarczy lista blokad: URL, element, krok odtworzenia, oczekiwane zachowanie i zrzut ekranu, jeśli focus jest niewidoczny. Dla developera najważniejsza jest powtarzalność: „na mobile menu otwarte Enterem nie pozwala dojść do drugiego linku” jest lepsze niż „menu jest niedostępne”.

Warto też rozdzielać błędy krytyczne od kosmetyki. Brak możliwości wysłania formularza bez myszki to blokada biznesowa. Słaby focus przy linku w stopce jest problemem, ale zwykle nie tak pilnym jak zepsuty checkout.

FAQ

Czy każda strona musi działać bez myszki?

Tak, jeśli zawiera linki, formularze, przyciski lub proces zakupowy. To podstawowy element dostępności i dobrego UX.

Czy focus outline można wyłączyć?

Nie warto. Można go wystylować, ale nie usuwać bez czytelnego zamiennika.

Czy test klawiatury wystarczy do pełnej zgodności WCAG?

Nie. To ważny test praktyczny, ale pełny audyt obejmuje też strukturę, kontrast, etykiety, komunikaty, treści i testy z czytnikiem ekranowym.