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ść. Dobra strategia sterowania klawiaturą w aplikacji zapewnia większą wygodę wszystkim użytkownikom.
Ustawienie fokusa i kolejność kart
W danym momencie focus odnosi się do elementu w aplikacji (np. pola, pola wyboru, przycisku lub linku), który obecnie otrzymuje dane z klawiatury. Oprócz otrzymywania zdarzeń klawiatury element skupienia otrzymuje też zawartość wklejoną ze schowka.
Aby przenieść fokus na stronie, użyj TAB
, aby przejść „do przodu”, i SHIFT + TAB
, aby 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ść, w jakiej zaznaczenie przemieszcza się do przodu i do tyłu po elementach interaktywnych, nazywana jest 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 aktywne, 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 wziąć pod uwagę 2 główne kwestie:
- Uporządkuj elementy w DOM według kolejności logicznej
- prawidłowo ustawić widoczność treści poza ekranem, które nie powinny być skoncentrowane;
Uporządkuj elementy w DOM według kolejności logicznej
Aby sprawdzić, czy kolejność kart w aplikacji jest logiczna, przejdź przez nie za pomocą klawisza tabulacji. 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 coś było widoczne wcześniej na ekranie, umieść to wcześniej w DOM.
Aby zobaczyć różnicę między logiczną a nielogiczną kolejnością kart, klikaj przyciski poniżej:
Kolejność logiczna kart
Nielogiczna kolejność kart
Poniżej porównujemy kod tych 2 przykładów:
Kolejność logiczna 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>
Zmieniaj wizualną pozycję elementów za pomocą arkuszy CSS, aby 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 elastyczne menu boczne, które otwiera się po kliknięciu przycisku, użytkownik nie powinien mieć możliwości skupienia na nim kursora, gdy jest ono zamknięte.
Aby uniemożliwić wybranemu elementowi interaktywnemu przejęcie fokusa, nadaj mu jedną z tych właściwości CSS:
display: none
visibility: hidden
Aby dodać element z powrotem do kolejności kart, np. gdy otwarta jest nawigacja boczna, zastąp podane wyżej właściwości CSS odpowiednio tymi:
display: block
visibility: visible
Dalsze kroki
W przypadku użytkowników, którzy korzystają z komputera głównie za pomocą klawiatury lub innego urządzenia wejściowego, logiczny porządek kart jest niezbędny, aby aplikacja była dostępna i łatwa w użyciu. Dobrym nawykiem jest sprawdzanie kolejności kart, przechodząc przez aplikację przed każdą publikacją.