Redakcja SAT 
Spis treści
Osoby z niepełnosprawnościami ruchowymi przy poruszaniu się po stronach internetowych często polegają wyłącznie na klawiaturze. Jeśli jednak nawigacja klawiaturowa jest źle zaprogramowana, witryna staje się dla nich nieużyteczna. Jakie problemy mogą napotkać użytkownicy? Przede wszystkim brak widoczności fokusa czy keybord trap. Aby focus management w HTML/CSS/JS był prawidłowy, należy przeanalizować stronę pod kątem spełniania wytycznych WCAG.
Czym jest keyboard accessibility?
Keyboard accessibility to dostęp do nawigacji serwisu za pomocą klawiatury. Dzięki niej osoby z różnymi niepełnosprawnościami mogą w pełni korzystać z zasobów internetowych. Przykładowo, osoby z ograniczoną mobilnością rąk, wynikającą z takich schorzeń jak artretyzm, dystrofia mięśniowa czy porażenie mózgowe, mogą mieć trudności z precyzyjnym operowaniem myszką. Dla nich klawiatura stanowi główne narzędzie interakcji z komputerem.
Jeśli strona nie jest przystosowana do obsługi za pomocą klawiatury, użytkownicy mogą napotkać bariery uniemożliwiające im dostęp do treści lub funkcji serwisu. Brak możliwości nawigacji klawiaturą prowadzi do frustracji, wykluczenia cyfrowego oraz ograniczenia dostępu do informacji i usług.
Nawigacja klawiaturą WCAG – jak wygląda w praktyce?
Zgodnie z wytycznymi WCAG (Web Content Accessibility Guidelines), nawigacja za pomocą klawiatury powinna być intuicyjna i spójna. Najważniejsza jest tutaj sekwencja klawisza Tab, która pozwala użytkownikowi przechodzić między interaktywnymi elementami strony, takimi jak linki, przyciski czy pola formularzy. Standardowa kolejność nawigacji Tab ma odzwierciedlać logiczny układ treści na stronie, umożliwiając użytkownikowi przewidywalne poruszanie się po niej (np. kombinacja klawiszy Shift + Tab powinna cofać do poprzedniego elementu).
Aby aktywować wybrany fokus, użytkownik może nacisnąć klawisz Enter lub Spacja. Przykładowo, klawisz Enter będzie służyć do aktywacji linków, podczas gdy Spacja może być używana do zaznaczania pól wyboru.
Poza tym, ważne jest zapewnienie obsługi innych klawiszy, takich jak strzałki, które mogą nawigować w obrębie rozwijanego menu czy listy wyboru.
Widoczność fokusa
Fokus to wizualne wskazanie, który element na stronie jest aktualnie aktywny i gotowy do interakcji. Jest to istotne w przypadku osób niedowidzących czy starszych, które mogą mieć trudności z szybkim lokalizowaniem aktywnych elementów. Wyraźne wyróżnienie fokusu, na przykład poprzez zmianę koloru obramowania, tła czy zastosowanie podkreślenia, pomaga użytkownikom zorientować się, gdzie aktualnie znajduje się ich fokus.
Jak uniknąć keyboard trap?
Keyboard trap występuje, gdy użytkownik nie może opuścić danego elementu lub sekcji strony za pomocą standardowej nawigacji klawiaturą. Aby tego uniknąć, należy upewnić się, że daną sekcję można opuścić za pomocą klawisza Tab lub odpowiednich kombinacji klawiszy.
W przypadku okien modalnych czy wyskakujących, fokus powinien automatycznie przenosić się do pierwszego interaktywnego elementu w oknie po jego otwarciu, a zamknięcie okna klawiszem Esc powinno przywracać fokus do elementu, który je aktywował.
Focus management w HTML/CSS/JS – co jeszcze należy sprawdzić?
Aby zapewnić pełną dostępność nawigacji klawiaturą, warto zwrócić uwagę na:
- kolejność tabulacji – nieprawidłowa kolejność może prowadzić do sytuacji, w której fokus przeskakuje w nieprzewidywalny sposób, np. z nagłówka od razu do stopki, pomijając formularz. Aby uniknąć takich problemów, należy dbać o naturalną hierarchię kodu HTML,
- tabulację do wszystkich elementów – wszystkie kluczowe elementy interaktywne, takie jak przyciski, linki, pola formularzy czy ikony pełniące funkcje nawigacyjne, muszą być dostępne za pomocą klawiatury. Problematyczne mogą być niestandardowe komponenty, np. elementy stworzone z tagu DIV zamiast BUTTON, które nie obsługują domyślnie nawigacji. W takich przypadkach konieczne jest dodanie atrybutu tabindex=”0″,
- klikalne banery, grafiki – jeśli baner reklamowy lub ikona przekierowuje do innej strony, ale nie otrzymuje fokusu podczas tabulacji, użytkownicy klawiatury nie będą mogli z niego skorzystać. Rozwiązaniem jest oznaczenie takich elementów jako interaktywne (w taki sam sposób, jak powyżej),
- rozwijalne listy – menu nawigacyjne i listy wyboru w formularzach muszą umożliwiać interakcję za pomocą klawiatury. Oczekiwanym zachowaniem jest nawigacja strzałkami w górę i w dół oraz potwierdzenie wyboru klawiszem Enter.
Weryfikacja prawidłowej nawigacji klawiaturą
Sprawdzenie, czy strona internetowa jest w pełni dostępna dla użytkowników korzystających z klawiatury, można przeprowadzić ręcznie, stosując się do wytycznych WCAG. Choć taka metoda jest skuteczna, bywa czasochłonna, szczególnie w przypadku rozbudowanych serwisów z wieloma podstronami.
Rozwiązaniem problemu jest skorzystanie z narzędzia SAT, które automatycznie analizuje dostępność cyfrową strony pod kątem nawigacji klawiaturą. SAT przeprowadza szczegółową inspekcję podstron, identyfikuje potencjalne błędy i generuje raport z dokładnym wskazaniem miejsc wymagających poprawy.
