Wiele osób używa klawiatury lub oprogramowania bądź sprzętu, który naśladuje jej funkcje, np. urządzenia do przełączania, jako głównego sposobu nawigacji. Może to wynikać z osobistych preferencji, wygody lub uszkodzenia sprzętu.
Osoby z tymczasowymi ograniczeniami fizycznymi, takimi jak skręcenie nadgarstka lub zaburzenia motoryki małej, np. zespół cieśni nadgarstka, mogą używać klawiatury do nawigacji. Użytkownicy niewidomi lub niedowidzący mogą używać klawiatury do nawigacji w połączeniu z oprogramowaniem powiększającym lub czytnikiem ekranu. Mogą jednak używać innych skrótów klawiszowych do nawigacji po ekranie niż osoby widzące.
Niektóre osoby bez niepełnosprawności mogą również używać klawiatury do nawigacji.
Obsługa klawiatury w przypadku wszystkich tych niepełnosprawności i okoliczności jest kluczowa. Duża część ułatwień dostępu związanych z klawiaturą koncentruje się na zaznaczeniu. Zaznaczenie odnosi się do elementu na ekranie, który aktywnie odbiera dane z klawiatury.
W tym module skupiamy się na strukturze HTML i stylach CSS dla klawiatury i elementów, które można zaznaczyć. W module JavaScript znajdziesz więcej informacji o zarządzaniu zaznaczeniem i naciśnięciach klawiszy w przypadku elementów interaktywnych.
Kolejność zaznaczenia
Elementy, do których użytkownik może przejść za pomocą klawiatury, nazywamy elementami, które można zaznaczyć. Kolejność zaznaczenia, nazywana też kolejnością tabulacji lub nawigacji, to kolejność, w jakiej elementy otrzymują zaznaczenie. Domyślna kolejność zaznaczenia musi być logiczna, intuicyjna i zgodna z wizualną kolejnością elementów na stronie.
W większości języków kolejność zaznaczenia zaczyna się u góry strony i kończy na dole, przechodząc od lewej do prawej. Jednak niektóre języki są czytane od prawej do lewej, więc język podstawowy strony może wymagać innej kolejności zaznaczenia.
Domyślnie kolejność zaznaczenia 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 tabulacji i podstawową obsługę zdarzeń klawiatury.
Możesz zaktualizować kolejność zaznaczenia, aby uwzględnić wszystkie elementy, które zwykle nie otrzymują zaznaczenia, takie jak nieinteraktywne elementy HTML, komponenty niestandardowe lub elementy z ARIA, i zastąpić naturalną semantykę zaznaczenia.
Tabindex
Kolejność zaznaczenia zaczyna się od elementów, które mają atrybut tabindex o wartości dodatniej (jeśli takie istnieją), i przechodzi od najmniejszej liczby dodatniej do największej (np. 1, 2, 3). Następnie przechodzi do elementów z atrybutem tabindex o wartości zero zgodnie z ich kolejnością w DOM. Wszystkie elementy z atrybutem tabindex o wartości ujemnej są usuwane z naturalnej kolejności zaznaczenia.
Gdy atrybut tabindex
o wartości zero (tabindex="0") zostanie zastosowany do elementów, których zwykle nie można zaznaczyć, są one
dodawane do naturalnej kolejności zaznaczenia na stronie zgodnie z ich kolejnością
w DOM. Jednak w przeciwieństwie do elementów HTML, które można zaznaczyć, musisz
zapewnić dodatkową obsługę klawiatury
aby były w pełni dostępne.
Podobnie, jeśli masz element, który zwykle jest możliwy do zaznaczenia, ale jest nieaktywny – np. przycisk, który nie działa, dopóki nie zostanie wypełnione pole do wprowadzania danych – dodaj do tego elementu atrybut tabindex o wartości ujemnej (tabindex="-1"). Dodanie atrybutu tabindex o wartości ujemnej sygnalizuje technologiom wspomagającym i klawiaturom, że ten przycisk powinien zostać usunięty z naturalnej kolejności zaznaczenia. Nie martw się – w razie potrzeby możesz użyć JavaScriptu, aby przywrócić zaznaczenie elementu.
W tym przykładzie do elementów, które nie otrzymują naturalnie zaznaczenia, dodano atrybut tabindex. Kolejność elementów została zmieniona za pomocą atrybutu tabindex, aby pokazać, jak może on wpływać na kolejność zaznaczenia. To przykład tego, czego nie należy robić.
Pomiń linki
Większość witryn ma obecnie długą listę linków do menu w głównym nagłówku strony, która jest taka sama na każdej stronie. Jest to przydatne w przypadku ogólnej nawigacji, ale może utrudniać użytkownikom korzystającym tylko z klawiatury łatwe przejście do głównej treści witryny bez konieczności wielokrotnego naciskania klawisza Tab.
Jednym ze sposobów na pominięcie zbędnych lub nieprzydatnych grup linków jest dodanie linku pomijania. Linki pomijania to linki kotwiczne, które przenoszą użytkownika do innej sekcji tej samej strony, używając identyfikatora tej sekcji, zamiast wysyłać go na inną stronę w witrynie lub do zasobu zewnętrznego. Linki pomijania są zwykle dodawane jako pierwszy element, który można zaznaczyć, a który użytkownik napotka po wejściu na stronę. Mogą być widoczne lub ukryte wizualnie, dopóki użytkownik nie przejdzie do nich za pomocą klawisza Tab, w zależności od projektu.
Gdy użytkownik naciśnie klawisz Tab, a aktywny link pomijania jest na miejscu, przenosi on zaznaczenie klawiatury na ten link. Użytkownik może kliknąć link pomijania i przejść do sekcji nagłówka oraz głównej nawigacji. Jeśli użytkownik nie kliknie linku pomijania i będzie nadal naciskać klawisz Tab, zostanie przeniesiony do następnego elementu, który można zaznaczyć.
Podobnie jak w przypadku wszystkich linków, ważne jest, aby link pomijania zawierał kontekst dotyczący jego przeznaczenia. Dodanie frazy „Przejdź do głównej treści” informuje użytkownika, dokąd prowadzi link. Podczas dodawania dodatkowego kontekstu do linków możesz wybrać wiele opcji kodu, np.
aria-labelledby,
aria-label lub dodanie go
do treści tekstowej elementu <a>, jak pokazano w przykładzie.
Wskaźnik zaznaczenia
Jak już wiesz, kolejność zaznaczenia jest ważnym aspektem ułatwień dostępu związanych z klawiaturą. Ważne jest też, aby zdecydować, jak będzie wyglądać zaznaczenie. Nawet jeśli kolejność zaznaczenia jest doskonała, jak użytkownik może wiedzieć, gdzie znajduje się na stronie, bez odpowiedniego stylu?
Widoczny wskaźnik zaznaczenia jest niezbędny, aby informować użytkowników o tym, gdzie się znajdują na stronie. Jest to szczególnie ważne w przypadku użytkowników, którzy widzą i korzystają tylko z klawiatury. Wskaźnik zaznaczenia nie jest zasłonięty (minimum) zapewnia, że wskaźnik zaznaczenia 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, które można zaznaczyć w Twojej witrynie lub aplikacji. Niektóre z nich są lepiej widoczne niż inne. Gdy użytkownik przechodzi za pomocą klawisza Tab przez stronę, ten styl jest stosowany, gdy element otrzymuje zaznaczenie klawiatury.
Jeśli zezwolisz przeglądarce na obsługę stylu zaznaczenia, sprawdź 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 zaznaczenia przeglądarki, co bardzo utrudnia użytkownikom nawigację po Twojej witrynie lub aplikacji.
Niezalecane – brak obramowania
a:focus { outline: none; /* don't do this! */ }
Zalecane – stylizowane obramowanie
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 zaznaczenia, który będzie pasować do Twojego motywu. Podczas tworzenia niestandardowego wskaźnika zaznaczenia masz dużą swobodę twórczą.
Kształt wskaźnika zaznaczenia może przybierać różne formy – może to być obramowanie, podkreślenie, pole, zmiana tła lub inna oczywista zmiana stylu, która nie polega tylko na kolorze, aby wskazać, że zaznaczenie klawiatury jest aktywne w tym elemencie.
Możesz zmienić styl wskaźnika zaznaczenia, aby był widoczny. Na przykład, gdy strona ma białe tło, możesz ustawić wskaźnik zaznaczenia przycisku na niebieskie tło. Gdy strona ma niebieskie tło, możesz ustawić ten sam styl zaznaczenia przycisku na białe tło.
Możesz zmienić styl elementu zaznaczenia na podstawie typu elementu. Na przykład możesz użyć kropkowanego podkreślenia w przypadku linków w treści, ale wybrać zaokrąglone obramowanie w przypadku elementu przycisku.
Nie ma reguły określającej, ile stylów wskaźnika zaznaczenia można mieć na jednej stronie, ale pamiętaj, aby zachować rozsądną liczbę, aby uniknąć niepotrzebnego zamieszania.