WCAG 2.1.1 Klawiatura

Kryterium sukcesu 2.1.1 zapewnia, że ze strony można korzystać bez myszy: niewidomi odwiedzający z czytnikiem ekranu, osoby z drżeniem rąk lub ograniczoną ruchomością dłoni, osoby używające urządzeń przełącznikowych lub sterowania głosem, które emulują klawiaturę, a także zaawansowani użytkownicy, którzy po prostu wolą klawiaturę. To poziom A i część normy EN 301 549 (punkt 9.2.1.1), na której opiera się Europejski akt o dostępności; na tej normie opiera się też polska ustawa o zapewnianiu spełniania wymagań dostępności niektórych produktów i usług przez podmioty gospodarcze.

Czego wymaga kryterium

Cała funkcjonalność treści musi być obsługiwana przez interfejs klawiatury i nie może zależeć od określonego tempa naciskania poszczególnych klawiszy (np. „naciśnij dwa razy szybko”).

Jedyny wyjątek dotyczy sytuacji, gdy sama funkcja wymaga danych wejściowych zależnych od ścieżki ruchu użytkownika, a nie tylko od punktów końcowych — np. rysowania odręcznego. Wyjątek dotyczy funkcji, a nie techniki wprowadzania: pisanie odręczne korzysta ze ścieżki, ale samo wprowadzanie tekstu nie, więc nadal musi działać z klawiatury.

Oferowanie dodatkowo myszy, dotyku lub innych metod wprowadzania jest w porządku i zalecane.

Typowe błędy w sklepie internetowym

• mega menu lub lista kategorii, która otwiera się tylko po najechaniu myszą;
• galerie zdjęć produktu, próbki kolorów lub selektory rozmiaru zbudowane z elementów div z obsługą kliknięcia i bez obsługi klawiatury;
• suwaki zakresu cen i przyciski zmiany ilości, których nie da się przesunąć strzałkami;
• „szybki podgląd” lub minikoszyk, który otwiera się kliknięciem, ale nie da się go otworzyć ani zamknąć z klawiatury;
• baner cookies lub widżet czatu, do którego przycisków nie da się dotrzeć klawiszem Tab;
• przewijany obszar (tabela rozmiarów, lista opinii), który nie może otrzymać fokusu, więc użytkownicy klawiatury nie mogą go przewinąć.

Jak to sprawdzić

Automatycznie: nasz skaner oznacza kilka wzorców związanych z klawiaturą: przewijane obszary, które nie mogą otrzymać fokusu, ramki iframe z interaktywną treścią usuniętą z kolejności tabulacji oraz mapy obrazkowe po stronie serwera (reguły w naszej bibliotece reguł). Nie stwierdzi, czy każda funkcja działa z klawiatury, więc główny test jest ręczny.

Ręcznie: odłożyć mysz i przejść przez prawdziwy zakup. Tab i Shift+Tab służą do przechodzenia, Enter do otwierania linków i naciskania przycisków, Spacja do przycisków i pól wyboru, strzałki wewnątrz menu, suwaków i grup przycisków opcji, a Esc do zamykania okien dialogowych. Otworzyć menu, przefiltrować kategorię, wybrać wariant, dodać do koszyka, zastosować kod rabatowy i dojść do kroku płatności. Każde działanie możliwe myszą musi być możliwe w ten sposób.

Jak to naprawić

• Używać natywnych elementów HTML — <button>, <a href>, <input>, <select> — domyślnie obsługują klawiaturę.
• Jeśli trzeba zbudować własny widżet, nadać mu tabindex="0", rolę ARIA i obsługę klawiszy zgodną ze wzorcem WAI-ARIA Authoring Practices dla danego widżetu.
• Sprawić, by menu otwierane najechaniem otwierały się także po otrzymaniu fokusu lub klawiszem Enter i pozostawały otwarte, dopóki fokus jest w środku.
• Sprawdzić aplikacje motywu i wtyczki (opinie, czat, listy życzeń) — wiele problemów z klawiaturą pochodzi z widżetów zewnętrznych.

Powiązane kryteria

• 2.1.2 Bez pułapki na klawiaturę — fokus klawiatury zawsze musi móc opuścić komponent.
• 2.4.3 Kolejność fokusu — kolejność zatrzymań klawisza Tab musi mieć sens.
• 2.4.7 Widoczny fokus — użytkownicy muszą widzieć, gdzie jest fokus klawiatury.

Najczęstsze pytania

Czego wymaga WCAG 2.1.1 Klawiatura?

Każda funkcja treści musi działać przez interfejs klawiatury, bez wymogu określonego tempa naciskania poszczególnych klawiszy. Obsługę myszą i dotykiem można oferować dodatkowo, ale nie zamiast klawiatury.

Czy od wymogu obsługi klawiaturą jest jakiś wyjątek?

Tylko dla funkcji, w których samo zadanie zależy od ścieżki ruchu, a nie tylko od punktu początkowego i końcowego, np. rysowanie odręczne lub podpis. Wprowadzanie tekstu pismem odręcznym się nie liczy, bo samo wprowadzanie tekstu nie wymaga ścieżki.

Czy narzędzie automatyczne przetestuje dostępność z klawiatury?

Tylko częściowo. Skaner znajdzie niektóre wzorce, np. przewijane obszary, które nie mogą otrzymać fokusu. To, czy każde menu, filtr i krok zamówienia naprawdę działa z klawiszami Tab, Enter, Spacja i strzałkami, trzeba wypróbować ręcznie.