Wielu użytkowników korzysta z klawiatury do nawigacji w aplikacjach – od osób z tymczasowymi i trwałymi zaburzeniami ruchowymi po użytkowników, którzy używają skrótów klawiszowych, aby zwiększyć wydajność i produktywność. Odpowiednia strategia nawigacji za pomocą klawiatury w Twojej aplikacji sprawia, że korzystanie z niej jest wygodniejsze dla wszystkich.
Zaznaczenie i kolejność kart
W danym momencie fokus odnosi się do tego, jaki element aplikacji (np. pole, pole wyboru, przycisk czy link) otrzymuje obecnie dane wejściowe z klawiatury. Oprócz odbierania zdarzeń z klawiatury aktywny element otrzymuje też treść wklejoną ze schowka.
Aby przenieść zaznaczenie na stronę, użyj klawisza TAB, by przejść do przodu, lub klawisza SHIFT + TAB, by przejść do tyłu. Element, który ma aktualnie fokus, jest często wskazywany przez ring fokusu. Różne przeglądarki mają różne style rysowania tego pierścienia. Kolejność przechodzenia do przodu i do tyłu przez elementy interaktywne nazywa się kolejnością kart.
Interaktywne elementy HTML, takie jak pola tekstowe, przyciski i listy wyboru, są domyślnie zaznaczane: są one automatycznie wstawiane do kolejności kart na podstawie ich pozycji w DOM. Te interaktywne elementy mają też wbudowane obsługę zdarzeń związanych z klawiaturą. Elementy takie jak akapity i elementy div nie są domyślnie zaznaczane, ponieważ użytkownicy zazwyczaj nie muszą z nimi wchodzić w interakcję.
Ważnym elementem zapewnienia użytkownikom płynnej nawigacji za pomocą klawiatury jest zastosowanie logicznego porządku kart. Podczas oceny i dostosowywania kolejności kart należy pamiętać o 2 głównych kwestiach:
- Uporządkuj elementy w DOM w kolejności logicznej
- prawidłowo ustawić widoczność treści poza ekranem, które nie powinny być skoncentrowane;
Uporządkuj elementy w DOM w kolejności logicznej
Aby sprawdzić, czy kolejność kart w aplikacji jest logiczna, przejdź na stronę klawiszem Tab. Zaznaczenie powinno się przemieszczać zgodnie z kolejnością czytania, czyli od lewej do prawej oraz od góry do dołu strony.
Jeśli kolejność elementów wydaje się nieprawidłowa, możesz zmienić ich kolejność w DOM, aby była bardziej naturalna. Jeśli chcesz, aby jakiś element pojawił się na ekranie wcześniej, przesuń go wcześniej w DOM.
Spróbuj przełączać się pomiędzy 2 zestawami przycisków za pomocą klawisza Tab, aby uzyskać logiczną kolejność kart i nielogiczną kolejność kart:
Kolejność logiczna kart
Nielogiczna kolejność kart
Poniżej porównujemy kod tych 2 przykładów:
Logiczna kolejność kart
<button>Kiwi</button>
<button>Peach</button>
<button>Coconut</button>
Nielogiczna kolejność kart
<button style="float: right">Kiwi</button>
<button>Peach</button>
<button>Coconut</button>
Zachowaj ostrożność, gdy zmieniasz wizualne położenie elementów za pomocą CSS, by uniknąć nielogicznej kolejności kart. Aby naprawić nielogiczną kolejność kart powyżej, przesuń przycisk „Kiwi”, aby znajdował się w DOM po przycisku „Coconut”, i usuń styl w ciele elementu.
Prawidłowo ustaw widoczność treści poza ekranem.
Czasami elementy interaktywne poza ekranem muszą znajdować się w DOM, ale nie powinny być uwzględniane w kolejności kart. Jeśli na przykład masz elastyczny boczny panel nawigacyjny, który otwiera się po kliknięciu przycisku, użytkownik nie powinien mieć możliwości skupienia się na bocznym panelu nawigacyjnym, gdy jest on zamknięty.
Aby uniemożliwić zaznaczenie elementu interaktywnego, przypisz mu jedną z tych właściwości CSS:
display: nonevisibility: hidden
Aby dodać element z powrotem do kolejności kart, np. gdy otwarta jest boczna nawigacja, zastąp powyższe właściwości CSS odpowiednio:
display: blockvisibility: visible
Dalsze kroki
W przypadku użytkowników, którzy obsługują komputer niemal wyłącznie za pomocą klawiatury lub innego urządzenia wejściowego, logiczna kolejność kart jest niezbędna, aby aplikacje były łatwo dostępne i użyteczne. Dobrym nawykiem jest sprawdzanie kolejności kart, przechodząc przez aplikację przed każdą publikacją.