Ułatw nawigację klawiaturą

Nie wszyscy użytkownicy korzystają z myszy. Dla wielu osób — w tym osób z niepełnosprawnościami ruchowymi, niewidomych oraz użytkowników technologii asystujących — podstawowym narzędziem poruszania się po stronie jest klawiatura. Dlatego każda funkcjonalność witryny powinna być w pełni dostępna bez użycia myszy.

Wszystkie elementy muszą działać z klawiatury

Użytkownik powinien mieć możliwość:

• przechodzenia między elementami za pomocą klawisza Tab,
• cofania się przy użyciu kombinacji Shift + Tab,
• aktywowania przycisków i linków klawiszem Enter lub Spacją,
• rozwijania menu, otwierania okien czy wysyłania formularzy bez użycia myszy.

Dotyczy to wszystkich elementów interaktywnych: menu nawigacyjnych, przycisków, formularzy, rozwijanych list, wyszukiwarek czy koszyków zakupowych.

Jeśli jakaś funkcja działa wyłącznie po kliknięciu myszą — oznacza to barierę dostępności.

Widoczny fokus to podstawa

Podczas poruszania się klawiaturą aktywny element powinien być wyraźnie oznaczony. Tzw. fokus (czyli wizualne podświetlenie aktualnie wybranego elementu) musi być:

• dobrze widoczny,
• kontrastowy,
• jednoznacznie wskazujący miejsce na stronie.

Usuwanie obramowania fokusu lub zastępowanie go mało widocznym efektem znacząco utrudnia korzystanie ze strony. Użytkownik musi zawsze wiedzieć, w którym miejscu aktualnie się znajduje.

Sprawdź to w praktyce

Najprostszym testem jest odłożenie myszy i przejście całej strony wyłącznie przy użyciu klawiatury. Warto sprawdzić:

• czy można dotrzeć do wszystkich linków i przycisków,
• czy kolejność przechodzenia jest logiczna,
• czy nie występują „pułapki klawiaturowe” (miejsca, z których nie można wyjść),
• czy fokus jest zawsze widoczny.

Osoby korzystające z czytników ekranu, takich jak NVDA, JAWS czy VoiceOver, w dużej mierze opierają nawigację właśnie na klawiaturze. Brak jej pełnej obsługi może całkowicie uniemożliwić im korzystanie ze strony.

Dostępność klawiaturowa to nie dodatek — to fundament dostępnej i nowoczesnej strony internetowej.