Wielu różnych użytkowników korzysta z klawiatury do poruszania się po aplikacjach – od osób z tymczasowymi i trwałymi zaburzeniami motorycznymi po użytkowników, którzy używają skrótów klawiszowych, aby zwiększyć wydajność i produktywność. Dobra strategia nawigacji za pomocą klawiatury w aplikacji zwiększa wygodę wszystkich użytkowników.
Zaznaczenie i kolejność kart
W danym momencie fokus oznacza element aplikacji, który aktywnie odbiera dane wejściowe z klawiatury, np. pole, pole wyboru, przycisk lub link. Oprócz zdarzeń klawiatury zaznaczony element otrzymuje też treść wklejoną ze schowka.
Aby przenieść fokus na stronie, użyj klawisza TAB, aby przejść „do przodu”, i klawisza SHIFT + TAB, aby przejść „do tyłu”. Skupiony element jest często oznaczany pierścieniem fokusu, a różne przeglądarki stylizują go w różny sposób. Kolejność, w jakiej zaznaczenie przechodzi do przodu i do tyłu przez elementy interaktywne, nazywa się kolejnością tabulacji.
Interaktywne elementy HTML, takie jak pola tekstowe, przyciski i listy wyboru, są niejawnie fokusowalne: są automatycznie wstawiane do kolejności tabulacji na podstawie ich pozycji w DOM. Te elementy interaktywne mają też wbudowaną obsługę zdarzeń klawiatury. Elementy, takie jak akapity i divy, nie są domyślnie możliwe do zaznaczenia, ponieważ użytkownicy zwykle nie muszą z nimi wchodzić w interakcję.
Wdrożenie logicznej kolejności tabulacji jest ważnym elementem zapewnienia użytkownikom płynnego poruszania się po stronie za pomocą klawiatury. Podczas oceny i dostosowywania kolejności kart warto pamiętać o 2 głównych kwestiach:
- Uporządkuj elementy w DOM w logicznej kolejności.
- Prawidłowe ustawienie widoczności treści poza ekranem, które nie powinny otrzymywać fokusu
Uporządkuj elementy w DOM w logicznej kolejności.
Aby sprawdzić, czy kolejność tabulacji w aplikacji jest logiczna, spróbuj przechodzić między elementami na stronie za pomocą klawisza Tab. Zaznaczenie powinno zwykle podążać za kolejnością czytania, czyli od lewej do prawej i od góry do dołu strony.
Jeśli kolejność fokusu wydaje się nieprawidłowa, zmień kolejność elementów w DOM, aby kolejność tabulacji była bardziej naturalna. Aby zmienić układ wizualny w witrynie, przenieś element wcześniej w DOM, zamiast zmieniać jego kolejność za pomocą CSS.
Na przykład:
<button style="float: right">Kiwi</button> <button>Peach</button> <button>Coconut</button>
<button>Peach</button> <button>Coconut</button> <button>Kiwi</button>
Zachowaj ostrożność podczas zmiany wizualnego położenia elementów za pomocą arkuszy CSS, aby uniknąć tworzenia nielogicznej kolejności tabulacji. Aby naprawić nielogiczną kolejność kart, przenieśliśmy pływający przycisk „Kiwi” za przycisk „Coconut” i usunęliśmy styl wbudowany.
Prawidłowo ustaw widoczność treści poza ekranem
Czasami interaktywne elementy poza ekranem muszą znajdować się w DOM, ale nie powinny być uwzględniane w kolejności tabulacji. Jeśli na przykład masz elastyczną nawigację, która otwiera się na pasku bocznym po kliknięciu przycisku, użytkownik nie powinien mieć możliwości skupienia się na niej, gdy jest zamknięta.
Aby zapobiec otrzymywaniu fokusu przez określony element interaktywny, nadaj mu jedną z tych właściwości CSS:
display: nonevisibility: hidden
Aby ponownie dodać element do kolejności tabulacji, np. gdy nawigacja jest otwarta, zastąp te właściwości CSS odpowiednio tymi:
display: blockvisibility: visible
Dalsze kroki
Dla użytkowników, którzy obsługują komputer niemal wyłącznie za pomocą klawiatury lub innego urządzenia wejściowego, logiczna kolejność tabulacji jest niezbędna, aby aplikacja była dostępna i użyteczna. Aby sprawdzić kolejność kart, przed każdą publikacją przełączaj się między elementami aplikacji za pomocą klawisza Tab.