Sterowanie za pomocą klawiatury

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

Osoby z tymczasowymi ograniczeniami fizycznymi, takimi jak zwichnięcie nadgarstka lub zaburzenia funkcji ruchowych rąk, np. zespół cieśni nadgarstka, mogą używać klawiatury do poruszania się po interfejsie. Osoby niedowidzące lub niewidome mogą używać 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ż wybierać 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. Zaznaczenie to element na ekranie, który aktywnie otrzymuje dane z klawiatury.

W tym module skupiamy się na strukturze HTML i stylach CSS dla elementów, które można aktywować za pomocą klawiatury i 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.

kolejność skupienia,

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ść punktów skupienia uwagi musi być logiczna, intuicyjna i zgodna z wizualną kolejnością 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 obsługiwanie kolejności kart i podstawowe obsługiwanie 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 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 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 zwykle 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 normalnie 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 zmieniona za pomocą funkcji tabindex, aby zilustrować jej wpływ na kolejność skupienia. Oto przykład, czego nie należy robić.

Pomiń linki

Większość witryn ma obecnie na stronie głównej długą listę linków menu, która jest spójna na wszystkich stronach. 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 przycisku Tab.

Jednym ze sposobów na pominięcie zbędnych lub nieprzydatnych grup linków jest dodanie linku do pominięcia. Linki pomijania to linki kotwiczne, które przekierowują do innej sekcji tej samej strony, używając 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, klawiatura przeniesie fokus 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 zapewnić dodatkowy kontekst linków, 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ż, 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 w danym momencie znajdują się na stronie. Jest to szczególnie ważne w przypadku widzących użytkowników korzystających tylko z klawiatury. Focus Not Obscured (Minimum) (Punkt skupienia nie zasłonięty – minimum): dzięki temu wskaźnik punktu skupienia nie jest ukryty pod innymi komponentami.

Domyślny styl przeglądarki

Obecnie każda nowoczesna przeglądarka internetowa ma inny domyślny styl wizualny, który jest stosowany do elementów skupienia w Twojej witrynie lub aplikacji, przy czym niektóre z nich 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 zapisane 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 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ł 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 żadnych zasad dotyczących tego, ile stylów wskaźnika fokusu możesz użyć na jednej stronie. Pamiętaj jednak, aby nie przesadzić z ich liczbą, aby nie wprowadzać niepotrzebnego zamieszania.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o fokusowaniu.