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.

Element	Co sprawdzić?	Częsty błąd
Menu	Czy da się wejść w linki, podmenu i wrócić bez myszki?	Podmenu działa tylko po najechaniu kursorem.
Przyciski	Czy Enter lub Spacja aktywuje przycisk?	Klikalny div bez roli i obsługi klawiatury.
Formularz	Czy kolejność pól jest logiczna i widać focus?	Brak etykiet, focus znika, błędy nie są czytane.
Modal/popup	Czy Escape zamyka okno i focus nie ucieka w tło?	Użytkownik zostaje uwięziony lub trafia poza popup.
Slider/karuzela	Czy da się zatrzymać, przejść i ominąć?	Automatyczny slider zabiera focus albo przewija treść.

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.

Najczęstsze problemy i szybkie naprawy

Problem	Objaw	Naprawa
Brak widocznego focusu	Użytkownik nie wie, gdzie jest na stronie.	Dodaj wyraźny styl :focus-visible.
Klikalny div	Element działa myszką, ale nie działa klawiaturą.	Użyj prawdziwego button albo a.
Zła kolejność Tab	Focus skacze po stronie nielogicznie.	Popraw kolejność HTML, unikaj dodatnich tabindex.
Menu tylko na hover	Podmenu nie otwiera się bez kursora.	Dodaj obsługę focusu i klawiszy.
Modal bez pułapki focusu	Focus przechodzi za okno dialogowe.	Zatrzymaj focus w modalu i przywróć go po zamknięciu.

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;
}

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.

Element raportu	Przykład
Adres URL	/kontakt
Kroki	Tab od początku strony do pola telefonu.
Problem	Focus przechodzi na niewidoczny element i użytkownik nie wie, gdzie jest.
Oczekiwane zachowanie	Focus powinien wejść kolejno w imię, email, telefon, wiadomość i przycisk wysyłki.
Priorytet	Wysoki, bo blokuje formularz kontaktowy.

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.

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.