Obsługa strony bez myszki: test klawiatury i dostępność w praktyce

Jeżeli strony nie da się obsłużyć bez myszki, część użytkowników nie przejdzie menu, formularza, koszyka albo kontaktu. To dotyczy osób korzystających z klawiatury, czytników ekranowych, przełączników, technologii wspomagających, ale też zwykłych sytuacji: uszkodzony touchpad, praca na laptopie, chwilowy problem z myszką.

Dobry test jest prosty: odśwież stronę, odłóż myszkę i używaj tylko klawiszy Tab, Shift+Tab, Enter, Spacja, Escape i strzałek. Jeśli nie widzisz, gdzie jesteś, albo nie możesz kliknąć ważnego elementu, interfejs wymaga poprawy.

Co musi działać z klawiatury?

Polskie materiały o dostępności cyfrowej na gov.pl jasno wskazują, że elementy interaktywne powinny być dostępne z klawiatury. W praktyce oznacza to nie tylko linki w treści, ale cały proces korzystania ze strony.

Test klawiatury krok po kroku

1. Otwórz stronę w nowym oknie i nie używaj myszki.
2. Naciśnij Tab kilka razy i sprawdź, czy widać obramowanie aktywnego elementu.
3. Przejdź przez menu, CTA, treść, formularz i stopkę.
4. Użyj Shift+Tab, żeby cofnąć się o kilka elementów.
5. Aktywuj linki Enterem, a przyciski Enterem lub Spacją.
6. Jeżeli jest popup, spróbuj zamknąć go Escape.
7. W formularzu wywołaj błąd i sprawdź, czy komunikat jest zrozumiały.

Skróty, które strona powinna obsługiwać

W testach wraca ten sam zestaw klawiszy. Warto sprawdzić, czy strona reaguje na nie tak, jak spodziewa się użytkownik.

Najczęstsze problemy i szybkie naprawy

Minimalny przykład dobrego przycisku

Jeżeli element ma wykonywać akcję, użyj przycisku. Nie buduj przycisku z losowego bloku HTML.

<button type="button" class="cta-button">
  Sprawdź ofertę
</button>

Do przejścia na inną podstronę użyj linku:

<a class="cta-button" href="/kontakt">
  Umów rozmowę
</a>

To brzmi banalnie, ale wiele problemów z dostępnością zaczyna się od używania nieodpowiedniego elementu.

Focus visible: mały detal, duża różnica

Focus nie powinien być subtelnym cieniem widocznym tylko na dobrym monitorze. Powinien jasno pokazywać aktywny element. Dla wielu użytkowników to odpowiednik kursora myszy.

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #f59e0b;
  outline-offset: 3px;
}

Pułapka focusu: kiedy pomaga, 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ść klawiszem Escape, modal staje się blokadą.

Źle zrobione popupy newsletterowe to klasyczny przykład. Na ekranie widać okno, ale Tab przechodzi po linkach w stopce pod spodem. Albo odwrotnie: focus zostaje w oknie, ale nie da się dojść do przycisku zamknięcia. Obie sytuacje wykryjesz w minutę testem klawiatury.

Dlaczego to wpływa na biznes?

Problem dostępności często wygląda jak problem konwersji. Użytkownik chce wysłać formularz, ale nie może wejść w pole. Chce kupić produkt, ale nie przechodzi przez filtr. Chce zamknąć popup, ale Escape nie działa. W analityce widać potem porzucenia, a nie przyczynę.

Przy projektowaniu lub przebudowie strony test klawiatury powinien być częścią zwykłej optymalizacji UX. To szybki test, który wyłapuje błędy niewidoczne na ładnym mockupie.

Jak opisać błąd developerowi?

„Nie działa dostępność” to za mało. Dobry raport powinien pokazać ścieżkę, klawisze i oczekiwane zachowanie. Dzięki temu poprawka jest szybsza i mniej ryzykowna.

Test mobile też ma znaczenie

Na telefonie użytkownik zwykle dotyka ekranu, ale dostępność nadal ma znaczenie: widoczne etykiety, logiczne pola, poprawne typy inputów, brak elementów przykrytych sticky barem i sensowne komunikaty błędów. Jeśli formularz na mobile wymaga powiększania ekranu albo klawiatura zasłania przycisk wysyłki, problem jest praktyczny, nie akademicki.

Klawisze myszy: kursor sterowany z klawiatury

Czasem problem nie leży w stronie, tylko w sprzęcie: myszka się psuje, touchpad odmawia posłuszeństwa albo użytkownik na co dzień nie korzysta z urządzenia wskazującego. W systemie Windows pomaga wtedy funkcja Klawisze myszy, która pozwala poruszać wskaźnikiem za pomocą klawiatury numerycznej. Podobne ustawienia ułatwień dostępu ma też macOS.

• Klawisze 1, 2, 3, 4, 6, 7, 8 i 9 przesuwają kursor w ośmiu kierunkach.
• Ukośnik (/) wybiera lewy przycisk myszy, znak minus (-) prawy, a gwiazdka (*) oba.
• Klawisz 5 klika wybranym przyciskiem, a znak plus (+) wykonuje podwójne kliknięcie.
• Zero (0) przytrzymuje przycisk, na przykład przy przeciąganiu, a kropka (.) go zwalnia.

W ustawieniach ułatwień dostępu można dodatkowo dopasować szybkość wskaźnika i powiadomienia dźwiękowe. To przydatne rozwiązanie awaryjne, ale sterowanie kursorem z klawiatury jest powolne. Dobrze zaprojektowana strona nie powinna go wymagać: wszystkie ważne akcje da się wykonać Tabem, Enterem i Spacją.

FAQ

Czy każda strona musi działać samą klawiaturą?

Tak, jeśli ma być dostępna i użyteczna. Szczególnie dotyczy to menu, formularzy, linków, przycisków, wyszukiwania, filtrów, koszyka i popupów.

Czy wystarczy dodać tabindex do elementów?

Nie. Dodatni tabindex często robi bałagan. Lepiej poprawić strukturę HTML i używać właściwych elementów interaktywnych.

Jak sprawdzić stronę bez specjalnych narzędzi?

Użyj samej klawiatury. Tab, Shift+Tab, Enter, Spacja, Escape i strzałki wystarczą, żeby wykryć wiele poważnych problemów.

Czy hover menu może być dostępne?

Może, ale musi mieć obsługę focusu i klawiatury. Jeżeli podmenu otwiera się wyłącznie po najechaniu myszką, to nie jest dostępne dla wszystkich użytkowników.