Dlaczego warto zacząć od klawisza Tab
Obsługa klawiaturą jest podstawowym sposobem korzystania ze strony dla części osób, a dla innych wygodną alternatywą dla myszy. Dotyczy nie tylko formularzy. Użytkownik powinien móc przejść do nawigacji, otworzyć menu, wybrać filtr w sklepie i zamknąć wysunięty panel bez zgadywania, gdzie znajduje się aktywny element.
Najprostszy test można wykonać bez narzędzi: otwórz stronę, odłóż mysz i naciskaj Tab. Klawisz ten zwykle przenosi fokus między elementami interaktywnymi, a Shift+Tab pozwala wracać. Enter aktywuje między innymi linki i przyciski; Spacja obsługuje przyciski oraz niektóre inne kontrolki. Zwróć uwagę, czy zawsze widać, gdzie jesteś, i czy każdą rozpoczętą czynność da się zakończyć.
Widoczny fokus to informacja, nie ozdobnik
Fokus wskazuje element, który w danej chwili odbiera polecenia z klawiatury. Może go sygnalizować obramowanie, podkreślenie lub wyraźna zmiana wyglądu. Jeśli styl strony usuwa domyślny obrys i nie daje czytelnego zamiennika, użytkownik może naciskać Tab, ale nie wie, na który link lub przycisk trafił.
Sprawdź fokus na jasnym i ciemnym tle, wewnątrz nagłówka, formularzy oraz wysuwanych paneli. Powinien być łatwy do zauważenia także wtedy, gdy element ma już własną ramkę. Nie oceniaj wyłącznie widoku po kliknięciu myszą: styl fokusu klawiaturowego może być od niego odróżniony. W typowym sklepie szczególnie ważne są przyciski dodawania do koszyka, filtry i elementy nawigacji, które często mają różne style w różnych częściach serwisu.
Kolejność przechodzenia powinna odpowiadać układowi strony
Kolejność naciskania Tab wynika przede wszystkim z kolejności elementów w kodzie strony. Układ wizualny może ją zmienić pozornie, na przykład gdy kolumny zostaną przestawione za pomocą CSS. Wtedy fokus może przeskakiwać po ekranie w sposób trudny do przewidzenia. Przejdź całą stronę do przodu i do tyłu; porównaj trasę fokusu z kolejnością, w jakiej czytasz widoczne treści.
Link powinien prowadzić do innego miejsca, a przycisk wykonywać działanie, na przykład otwierać menu. Korzystanie z tych standardowych elementów ułatwia obsługę klawiaturą bez dopisywania zachowań od podstaw. Unikaj dodatnich wartości tabindex służących do ręcznego ustawiania kolejności: łatwo tworzą osobną, niespójną trasę przechodzenia. Długa strona z powtarzanym nagłówkiem może też korzystać z widocznego po otrzymaniu fokusu linku pomijającego nawigację i prowadzącego do głównej treści.
Menu, panele i okna dialogowe wymagają osobnej kontroli
Wysuwane menu powinno dać się otworzyć i zamknąć klawiaturą, a jego przycisk powinien jasno sygnalizować, czy menu jest rozwinięte. Po zamknięciu niewidoczne linki nie mogą nadal pojawiać się podczas przechodzenia klawiszem Tab. Sprawdź to również na wąskim ekranie: nawigacja mobilna często używa innego komponentu niż wersja komputerowa.
Okno dialogowe, na przykład panel logowania, wymaga bardziej świadomego zarządzania fokusem. Po otwarciu fokus powinien trafić do sensownego miejsca w oknie. Dopóki okno jest aktywne, użytkownik nie powinien przypadkowo przechodzić do elementów strony znajdujących się za nim. Powinien móc je zamknąć przewidzianym przyciskiem, a zwykle także klawiszem Escape. Po zamknięciu fokus warto przywrócić do przycisku, który otworzył okno. Zwykły rozwijany fragment treści nie zawsze potrzebuje takiego samego zachowania jak okno dialogowe, dlatego najpierw ustal, jaką funkcję pełni dany element.
Krótka lista kontroli przed publikacją
Przetestuj reprezentatywne widoki: stronę główną, artykuł, formularz oraz stronę z menu lub filtrami. Zacznij od początku każdego widoku i przejdź go bez myszy. Sprawdź kolejno: czy fokus jest widoczny; czy Tab i Shift+Tab prowadzą w logicznym porządku; czy każdy widoczny element interaktywny można uruchomić; czy ukryte elementy nie przechwytują fokusu; czy po zamknięciu panelu wiadomo, gdzie wrócił fokus.
Powtórz test po zmianach w nagłówku, szablonie lub skryptach sterujących wysuwanymi elementami. Sama możliwość dotarcia do przycisku nie wystarcza, jeśli jego działanie pozostawia użytkownika w niewłaściwym miejscu. Poprawna obsługa klawiaturą ułatwia korzystanie ze strony, ale nie jest obietnicą określonych pozycji w wyszukiwarce. Traktuj ją jako część jakości witryny, którą można sprawdzić i poprawić niezależnie od wyników SEO.
