Wielu użytkowników korzysta z klawiatury do poruszania się po aplikacjach – zarówno w przypadku innych użytkowników, z tymczasową i trwałą niepełnosprawnością ruchową u użytkowników korzystających z klawiatury i skróty do zwiększania wydajności i produktywności. Dobra nawigacja za pomocą klawiatury. zapewnia większą wygodę wszystkim użytkownikom.
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. Nie tylko odbiera zdarzenia z klawiatury, ale zaznaczony element otrzymuje też treści. wklejony ze schowka.
Aby przenieść zaznaczenie na stronę, użyj klawisza TAB do przejścia „do przodu” i SHIFT + TAB
aby przejść wstecz. Obecnie zaznaczony element jest często oznaczony
pierścień ostrości, a różne przeglądarki dostosowują jego styl.
kolejność, w jakiej zaznaczenie przechodzi do przodu i do tyłu przez elementy interaktywne.
jest tzw. kolejność kart.
Interaktywne elementy HTML, takie jak pola tekstowe, przyciski i listy wybranych elementów, możliwy do zaznaczenia: elementy są automatycznie wstawiane do kolejności kart. na podstawie swojej pozycji DOM. Te elementy interaktywne mają też wbudowaną obsługę zdarzeń klawiatury. Elements np. akapitów czy elementów div, nie można domyślnie zaznaczyć, nie muszą wchodzić z nimi w interakcje.
Odpowiednia kolejność kart jest ważna, ponieważ musisz zapewnić użytkownikom i płynną nawigację za pomocą klawiatury. Istnieją 2 główne sposoby pamiętaj o ocenie i dostosowywaniu kolejności kart:
- Ułóż elementy w DOM w odpowiedniej kolejności logicznej
- Prawidłowo ustaw widoczność treści poza ekranem, które nie powinny otrzymywać skupienie
Ułóż elementy w DOM w odpowiedniej kolejności logicznej
Aby sprawdzić, czy kolejność kart w aplikacji jest logiczna, użyj klawisza Tab stronę. Ogólnie zaznaczenie powinno następować w kolejności czytania, czyli od lewej do prawej, od góry do dołu strony.
Jeśli kolejność zaznaczenia jest nieprawidłowa, należy zmienić kolejność elementów w DOM, kolejność kart jest bardziej naturalna. Jeśli chcesz, aby coś wyglądało na ekranie możesz przenieść je wcześniej w modelu DOM.
Spróbuj przełączać się pomiędzy 2 zestawami przycisków za pomocą klawisza Tab, aby wyświetlić kartę logiczną z nielogiczną kolejnością tabulacji:
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ść przy zmianie pozycji elementów za pomocą CSS, aby unikać w nielogicznej kolejności tabulacji. Aby poprawić powyższą nielogiczną kolejność kart, przesuń pływające „Kiwi” tak, aby pojawiał się po słowie „Cokoszu”. w DOM, usuń styl wbudowany.
Prawidłowo ustaw widoczność treści poza ekranem.
Czasami elementy interaktywne poza ekranem muszą znajdować się w DOM, ale nie powinny 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 być w stanie skupić się na bocznym panelu nawigacyjnym gdy jest zamknięte.
Aby dany element interaktywny nie był zaznaczony, należy dodaj do elementu jedną z tych właściwości CSS:
display: nonevisibility: hidden
Aby dodać element z powrotem na kolejność kart, np. gdy boczny panel nawigacyjny to otwarte, zastąp powyższe właściwości CSS odpowiednio następującym fragmentem:
display: blockvisibility: visible
Dalsze kroki
Dla użytkowników, którzy obsługują komputer niemal wyłącznie za pomocą klawiatury lub na innym urządzeniu wejściowym, logiczna kolejność tabulatorów jest niezbędna, czy też aplikacja jest dostępna i użyteczna. Sprawdzaj kolejność kart, spróbuj przeglądać aplikację przed jej opublikowaniem.