Sterowanie za pomocą klawiatury

Wiele osób używa klawiatury lub oprogramowania lub sprzętu, które naśladują jej działanie, np. przełącznika, jako głównego środka nawigacji. Może to być spowodowane osobistymi preferencjami, wydajnością lub uszkodzonym sprzętem.

Osoby z przejściowymi ograniczeniami fizycznymi, takimi jak skręcenie nadgarstka lub niepełnosprawność ruchowa (np. cieśni nadgarstka), mogą poruszać się za pomocą klawiatury. Osoby niedowidzące lub niewidome mogą poruszać się po stronie za pomocą klawiatury w połączeniu z oprogramowaniem powiększającym lub czytnikiem ekranu. Mogą jednak używać innych skrótów klawiszowych niż użytkownicy widzący.

Niektóre osoby bez niepełnosprawności mogą też preferować nawigację za pomocą klawiatury.

Obsługa klawiatury w przypadku wszystkich tych niepełnosprawności i sytuacji jest kluczowa. Większość ułatwień dostępu z klawiatury koncentruje się na fokusie. Aktywne pole to element na ekranie, który obecnie otrzymuje dane z klawiatury.

W tym module skupiamy się na strukturze HTML i stylach CSS dla elementów sterowanych klawiaturą oraz elementów, na których można skupić uwagę. Moduł JavaScript zawiera więcej informacji o zarządzaniu zaznaczeniem oraz naciśnięciach klawiszy w elementach interaktywnych.

Zaznacz kolejność

Elementy, do których może przejść użytkownik klawiatury, są nazywane elementami, które można zaznaczyć. Kolejność elementów, zwana też kolejnością kart lub nawigacji, to kolejność, w jakiej elementy są zaznaczane. Domyślna kolejność elementów musi być logiczna, intuicyjna i zgodna z wizualną kolejnością elementów na stronie.

W przypadku większości języków kolejność elementów zaczyna się u góry strony i kończy na dole, a elementy są przesuwane od lewej do prawej. Niektóre języki czyta się jednak od prawej do lewej, więc w przypadku języka głównego strony może być potrzebna inna kolejność.

Domyślnie kolejność elementów obejmuje elementy HTML, które można zaznaczyć, takie jak linki, pola wyboru i pola tekstowe. Elementy HTML, które można zaznaczyć, mają wbudowaną obsługę kolejności kart i podstawową obsługę zdarzeń klawiatury.

Możesz zmienić kolejność elementów, aby obejmowała elementy, które zwykle nie są zaznaczane, takie jak nieinteraktywne elementy HTML, komponenty niestandardowe lub elementy z atrybutami ARIA, oraz zastąpić semantykę automatycznego zaznaczania.

tabindex

Kolejność fokusowania zaczyna się od elementów, które mają dodatni atrybut tabindex (jeśli takie istnieją), i przechodzi od najmniejszej dodatniej liczby do największej (np. 1, 2, 3). Następnie przechodzi przez elementy o wartości tabindex o wartości 0 zgodnie z kolejnością w DOM. Wszystkie elementy z ujemnym indeksem Tabindex są usuwane z naturalnej kolejności ostrości.

Gdy do elementów, które normalnie nie mogą być zaznaczone, zastosujesz tabindex równy 0 (tabindex="0"), zostaną one dodane do naturalnego porządku elementów strony zgodnie z ich kolejnością w DOM. Jednak w odróżnieniu od elementów HTML, które można naturalnie ustawić w centrum uwagi, musisz zapewnić dodatkową obsługę klawiatury, aby były w pełni dostępne.

Podobnie, jeśli masz element, który zwykle można zaznaczyć, ale jest nieaktywny (np. przycisk, który nie działa, dopóki nie wypełnisz pola do wprowadzania danych), dodaj do tego elementu ujemny indeks tabindex (tabindex="-1"). Dodanie do technologii wspomagających i klawiatur sygnału tabindex o ujemnej wartości oznacza, że ten przycisk powinien zostać usunięty z naturalnej kolejności elementów. Nie martw się. W razie potrzeby możesz użyć JavaScriptu, aby ponownie ustawić fokus na tym elemencie.

W tym przykładzie atrybut tabindex został dodany do elementów, które nie są automatycznie zaznaczane. Kolejność elementów została manipulowana za pomocą parametru tabindex, aby zilustrować potęgę, jaką dany element może mieć w odniesieniu do kolejności zaznaczenia. Oto przykład, czego nie należy robić.

Nowa kolejność zaznaczenia odzwierciedla kod HTML.
Obserwuj, jak użytkownik porusza się po kodzie HTML w CodePen za pomocą klawiatury.

W większości witryn lista linków do menu w głównym nagłówku strony jest spójna i spójna między stronami. Jest to świetne rozwiązanie w przypadku ogólnej nawigacji, ale może utrudniać użytkownikom korzystającym tylko z klawiatury łatwe przechodzenie do głównej treści witryny bez konieczności wielokrotnego klikania.

Jednym ze sposobów na pominięcie zbędnych lub nieprzydatnych grup linków jest dodanie linku do pominięcia. Linki do pomijania to linki kotwiczne, które przekierowują do innej sekcji tej samej strony, korzystając z identyfikatora tej sekcji, zamiast wysyłać użytkownika do innej strony w witrynie lub do zewnętrznego zasobu. Linki do pomijania są zwykle dodawane jako pierwszy element, na którym użytkownik może skupić uwagę po wejściu na stronę. Mogą być widoczne lub niewidoczne do momentu, gdy użytkownik na nie kliknie, w zależności od tego, czego wymaga projekt.

Gdy użytkownik naciśnie klawisz tabulacji, a aktywny jest link do pominięcia, fokus klawiatury przejdzie na ten link. Użytkownik może kliknąć link pomijania i przejść przez nagłówek i główną nawigację. Jeśli użytkownik nie kliknie linku „Pomiń” i przejdzie dalej w modelu DOM, zostanie przekierowany do następnego elementu, na którym można ustawić fokus.

Podobnie jak w przypadku wszystkich linków, ważne jest, aby link do skrótu zawierał kontekst dotyczący celu linku. Dodanie frazy „Przejdź do głównej treści” pozwala użytkownikowi wiedzieć, dokąd prowadzi link. Aby dodać linkom dodatkowy kontekst, możesz wybrać jedną z wielu opcji kodu, takich jak aria-labelledby, aria-label lub dodanie go do treści tekstowych elementu <a>, jak pokazano w przykładzie.

Podgląd CodePen z zaznaczoną klawiaturą.
Obserwuj, jak użytkownik korzysta z klawiatury z linkiem do pominięcia i bez niego.

Wskaźnik ostrości

Jak już wiesz, kolejność elementów jest ważnym aspektem dostępności za pomocą klawiatury. Ważne jest też, aby zdecydować, jak ma wyglądać ten element. Ponieważ nawet jeśli kolejność elementów jest dobra, jak użytkownik ma wiedzieć, gdzie znajduje się na stronie bez odpowiedniego stylizowania?

Widoczny wskaźnik punktu skupienia jest bardzo ważny, ponieważ informuje użytkowników o tym, gdzie się znajdują na stronie. Jest to szczególnie ważne w przypadku widzących użytkowników korzystających tylko z klawiatury. Focus Not Obscured (Minimum) (Nieprzysłonięty punkt skupienia (minimum)) zapewnia, że wskaźnik punktu skupienia nie jest ukryty pod innymi komponentami.

Domyślny styl przeglądarki

Obecnie każda nowoczesna przeglądarka ma inny domyślny styl wizualny, który odnosi się do elementów w witrynie lub aplikacji, które można zaznaczyć, a niektóre są lepiej widoczne niż inne. Gdy użytkownik przewija stronę, ta stylizacja jest stosowana, gdy element jest zaznaczany za pomocą klawiatury.

Jeśli zezwolisz przeglądarce na obsługę stylu zaznaczenia, musisz sprawdzić kod, aby upewnić się, że motyw nie zastąpi domyślnego stylu przeglądarki. Zastąpienie jest często zapisywane jako "outline: 0" lub "outline: none" w arkuszu stylów. Ten niewielki fragment kodu może usunąć domyślny styl wskaźnika fokusu przeglądarki, co znacznie utrudnia użytkownikom poruszanie się po witrynie lub aplikacji.

Niezalecane – brak konspektu

a:focus {
 
outline: none; /* don't do this! */
}

Zalecane – kontur z dobrym stylem

a:focus {
 
outline: auto 5px Highlight; /* for non-webkit browsers */
 
outline: auto 5px -webkit-focus-ring-color; /* for webkit browsers */
}

Style niestandardowe

Oczywiście możesz też pójść dalej niż domyślny styl przeglądarki i utworzyć niestandardowy wskaźnik fokusa, który będzie pasował do Twojego motywu. Podczas tworzenia niestandardowego wskaźnika na potrzeby

Kształt wskaźnika aktywnego elementu może przybierać wiele form, np. obrys, obramowanie, podkreślenie, pole, zmiana tła lub inna oczywista zmiana stylistyczna, która nie polega wyłącznie na kolorze.

Możesz zmienić styl wskaźnika ostrości, aby był dobrze widoczny. Jeśli na przykład strona ma białe tło, możesz ustawić niebieskie tło dla wskaźnika skupienia przycisku. Jeśli strona ma niebieskie tło, możesz ustawić ten sam styl skupienia na przycisku na białym tle.

Styl elementu skupienia można zmienić w zależności od typu elementu. Możesz na przykład zastosować podkreślenie z kropkami w przypadku linków do treści, a dla elementu przycisku – zaokrąglone obramowanie.

.
Zaznacz styl zgodnie z przykładem w CSS.
Obserwuj, co się dzieje, gdy użytkownik przełącza się między elementami z klawiszami.

Nie ma reguły dotyczącej liczby stylów wskaźnika fokusu na jednej stronie, ale pamiętaj, aby była to rozsądna liczba, aby uniknąć niepotrzebnych pomyłek.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę na temat ARIA i HTML.

Który przykład stylu CSS :focus jest najbardziej dostępny na białym tle?

background-color:black;
outline: none; text-decoration:none; background:none;
outline: 0.5rem solid yellow;
text-decoration: dotted underline 2px blue;

Do czego służy link do pominięcia?

Pomóc użytkownikowi korzystającemu z klawiatury w pomijaniu nieciekawych treści.
Pomaga użytkownikowi korzystającemu z klawiatury pominąć niepotrzebne lub nieprzydatne grupy linków.