Wielu użytkowników korzysta z tej klawiatury do poruszania się po aplikacjach – od użytkowników z tymczasową i trwałą niepełnosprawnością ruchową po użytkowników, którzy korzystają ze skrótów klawiszowych, aby zwiększyć efektywność i produktywność. Dobra strategia nawigowania przy użyciu klawiatury w danej aplikacji jest dla wszystkich wygodniejsza.
Zaznaczenie i kolejność kart
W danym momencie fokus odnosi się do elementu w aplikacji (np. pola, pola wyboru, przycisku czy linku), który jest obecnie odbierany z klawiatury. Oprócz zdarzeń z klawiatury aktywny element otrzymuje też treść wklejoną ze schowka.
Aby przenieść zaznaczenie na stronę, użyj przycisku TAB do przejścia do przodu lub SHIFT + TAB do przejścia wstecz. Aktualnie aktywny element jest często oznaczony pierścieniem ostrości, a w różnych przeglądarkach styl pierścieni ostrości jest odmienny. Kolejność przechodzenia do interaktywnych elementów do przodu i do tyłu to kolejność tabulacji.
Można je domyślnie zaznaczać, np. pola tekstowe, przyciski i listy wyboru – są one automatycznie wstawiane w kolejności kart na podstawie ich pozycji w elemencie DOM. Te elementy interaktywne mają też wbudowaną obsługę zdarzeń klawiatury. Elementów takich jak akapity czy elementy div nie można łatwo zaznaczyć, ponieważ użytkownicy zwykle nie muszą wchodzić z nimi w interakcję.
Logiczna kolejność kart to ważny element zapewniania użytkownikom płynnej nawigacji przy użyciu klawiatury. Oceniając i dostosowując kolejność kart, należy pamiętać o 2 głównych kwestiach:
- Ułóż elementy w modelu DOM w kolejności logicznej.
- Prawidłowo ustaw widoczność treści poza ekranem, które nie powinny się skupiać
Ułóż elementy w modelu DOM w kolejności logicznej.
Aby sprawdzić, czy kolejność kart aplikacji jest logiczna, wypróbuj stronę za pomocą klawisza Tab. Zasadniczo kolejność czytania powinna przebiegać od lewej do prawej, od góry do dołu strony.
Jeśli kolejność zaznaczenia wydaje się nieprawidłowa, zmień kolejność elementów w DOM, aby poprawić jej naturalność. Jeśli chcesz, aby coś wyświetlało się wcześniej na ekranie, przenieś to wcześniej w DOM.
Użyj klawisza Tab, aby przechodzić między 2 zestawami przycisków poniżej, aby uzyskać logiczną kolejność kart i ilość kart:
Logiczna kolejność kart
Nielogiczna kolejność kart
Kody tych 2 przykładów są w porównaniu poniżej:
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>
Zmieniając wizualne położenie elementów za pomocą CSS, zachowaj ostrożność, aby uniknąć utworzenia nielogicznej kolejności zakładek. Aby poprawić porządkową kolejność kart powyżej, przesuń pływający przycisk „Kiwi” tak, aby w DOM znajdował się pływający przycisk „Kiwi”, i usuń styl wbudowany.
Prawidłowo ustaw widoczność treści poza ekranem
Czasami elementy interaktywne poza ekranem muszą być w DOM, ale nie powinny występować w kolejności kart. Jeśli np. masz elastyczny boczny panel nawigacyjny, który otwiera się po kliknięciu przycisku, użytkownik nie powinien być w stanie zająć się jego zamkniętym panelem nawigacyjnym.
Aby konkretny element interaktywny nie był zaznaczony, należy mu podać jedną z tych właściwości CSS:
display: nonevisibility: hidden
Aby dodać element z powrotem do kolejności kart, np. po otwarciu bocznego panelu nawigacyjnego, zastąp powyższe właściwości CSS odpowiednio tymi właściwościami:
display: blockvisibility: visible
Dalsze kroki
W przypadku użytkowników, którzy prawie w całości korzystają z komputera z użyciem klawiatury lub innego urządzenia wejściowego, logiczna kolejność kart ma kluczowe znaczenie dla dostępności i użyteczności aplikacji. W ramach nawyku sprawdzania kolejności kart warto przeglądać aplikację przed każdym opublikowaniem.