Wielu użytkowników używa klawiatury do poruszania się po aplikacjach – od użytkowników z przejściową lub trwałą niepełnosprawnością ruchową po osoby korzystające ze 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. Obecnie zaznaczony element jest często oznaczony pierścieniem ostrości. Różne przeglądarki dostosowują jego pierścień. 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 wybranych elementów, można domyślnie zaznaczyć: są automatycznie wstawiane do kolejności kart na podstawie swojego położenia w DOM. Te elementy interaktywne mają też wbudowaną obsługę zdarzeń klawiatury. Elementy takie jak akapity i elementy div nie mogą być domyślnie zaznaczone, ponieważ użytkownicy zwykle nie muszą wchodzić z nimi w interakcję.
Użycie logicznej kolejności kart jest ważnym elementem zapewniającym użytkownikom płynną nawigację za pomocą klawiatury. Oceniając i zmieniając kolejność kart, pamiętaj o 2 głównych kwestiach:
- Ułóż elementy w DOM w odpowiedniej kolejności logicznej
- Prawidłowo ustaw widoczność treści poza ekranem, które nie powinny być ostre.
Ułóż elementy w DOM w odpowiedniej kolejności logicznej
Aby sprawdzić, czy kolejność kart w aplikacji jest logiczna, przejdź na stronę klawiszem Tab. Ogólnie zaznaczenie powinno znajdować się w kolejności czytania, czyli od lewej do prawej, od góry do dołu strony.
Jeśli kolejność zaznaczenia wydaje się nieprawidłowa, należy zmienić kolejność elementów w DOM, aby kolejność kart 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:
Logiczna kolejność kart
Nielogiczna kolejność kart
Poniżej porównujemy kod obu tych 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 poprawić nielogiczną kolejność kart, przenieś pływający przycisk „Kiwi” tak, aby znajdował się za przyciskiem „Kokos” w DOM, i usuń styl wbudowany.
Prawidłowo ustaw widoczność treści poza ekranem.
Czasami elementy interaktywne poza ekranem muszą znajdować się w DOM, ale nie powinny znajdować się 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. Regularnie sprawdzaj kolejność kart, przeglądając aplikację przed każdą publikacją.