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 wynikać z osobistych preferencji, wydajności lub zepsutego sprzętu.

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 i niewidome do nawigacji mogą używać klawiatury w połączeniu z oprogramowaniem do powiększania lub czytnika ekranu. Mogą jednak używać innych skrótów klawiszowych do poruszania się po ekranie niż użytkownicy widzący.

Niektóre osoby bez niepełnosprawności mogą również poruszać się 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 punktem skupienia i skrótach klawiszowych dotyczących elementów interaktywnych.

Zaznacz kolejność

Elementy, do których użytkownik może przejść za pomocą klawiatury, są nazywane elementami możliwymi do zaznaczenia. 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. Do elementów HTML, które można naturalnie ustawić w centrum uwagi, należy m.in. wbudowane wsparcie dla kolejności kart i podstawowa obsługa 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.

Indeks tabulacji

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 tabindex 0 według ich kolejności w DOM. Wszystkie elementy z ujemnym tabindex są usuwane z naturalnej kolejności fokusowania.

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. Bez obaw – możesz użyć JavaScriptu, by w razie potrzeby ponownie dodać zaznaczenie do elementu.

W tym przykładzie do elementów, które nie są automatycznie zaznaczone, dodaliśmy atrybut tabindex. 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. To przykład tego, czego nie należy robić.

Pomiń linki

Większość witryn ma obecnie na głównym nagłówku długą listę linków menu, która jest spójna na każdej stronie. 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 pomijania są zwykle dodawane jako pierwszy możliwy do zaznaczenia element napotkany przez użytkownika po przejściu do witryny. Mogą być widoczne lub ukryte, dopóki użytkownik nie wyświetli ich za pomocą kart, w zależności od tego, czego wymaga projekt.

Gdy użytkownik naciśnie klawisz Tab, a aktywny link pomijania jest dostępny, aktywuje on ten link na klawiaturze. Użytkownik może kliknąć link pomijania i przejść przez nagłówek i główną nawigację. Jeśli użytkownik nie kliknie linku pominięcia i przejdzie za pomocą klawisza Tab w dół DOM, zostanie przekierowany do następnego elementu, którego można zaznaczyć.

Podobnie jak w przypadku wszystkich linków, ważne jest, aby link do skrótu zawierał kontekst dotyczący celu linku. Dodanie wyrażenia „Przejdź do głównej treści” informuje użytkownika, 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.

Wskaźnik ostrości

Jak już wiesz, kolejność elementów jest ważnym aspektem dostępności za pomocą klawiatury. Ważne jest też określenie stylu tego punktu. 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. Niezasłonięte ostrość (minimalna) gwarantuje, że wskaźnik ostrości nie będzie 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ę stylów fokusu, sprawdź kod, aby upewnić się, że motyw nie zastąpi domyślnych stylów 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 konturów

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

Zalecane – stylizowany kontur

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 wyjść poza domyślny styl przeglądarki i utworzyć niestandardowy wskaźnik ostrości, 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ł lepiej 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 użyć przerywanego podkreślenia dla linków w treści, ale wybrać zaokrągloną ramkę dla elementu przycisku.

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.