Wiele osób używa klawiatury lub innego oprogramowania/sprzętu, które naśladuje funkcje klawiatury, np. przełącznika, jako głównego środka nawigacji. Osoby z tymczasowymi ograniczeniami fizycznymi, takimi jak skręcenie nadgarstka lub niepełnosprawność ruchowa (np. kanał nadgarstka), a także niektóre osoby bez niepełnosprawności, mogą poruszać się po stronie za pomocą klawiatury z powodu własnych preferencji, wydajności lub uszkodzenia sprzętu.
Osoby niedowidzące i niewidome mogą używać klawiatury do nawigacji oraz oprogramowania do powiększania lub czytnika ekranu. Mogą jednak poruszać się po ekranie za pomocą innych skrótów klawiszowych niż widzący użytkownik.
W przypadku wszystkich tych niepełnosprawności i warunków niezbędna jest pomoc przy korzystaniu z klawiatury. Znaczna część ułatwień dostępu za pomocą klawiatury koncentruje się na fokusie. Zaznaczenie odnosi się do tego, który element na ekranie otrzymuje dane wejściowe z klawiatury.
W tym module skupimy się na strukturze HTML i określaniu stylów CSS w przypadku klawiatury i elementów, które można zaznaczyć. Moduł JavaScript zawiera więcej informacji o zarządzaniu fokusem oraz o naciśnięciach klawiszy w elementach interaktywnych.
Zaznacz kolejność
Elementy, do których użytkownik klawiatury może przechodzić, nazywane są elementami, które można zaznaczyć. Kolejność zaznaczenia (nazywana też kolejnością kart lub nawigacji) to kolejność, w jakiej elementy są zaznaczone. Domyślna kolejność zaznaczenia musi być logiczna i intuicyjna oraz odpowiadać wizualnej kolejności zaznaczenia na stronie.
W przypadku większości języków kolejność zaznaczenia zaczyna się od góry strony i kończy na dole, przesuwając palcem od lewej do prawej. Niektóre języki są jednak czytane od prawej do lewej, więc główny język strony może wymagać innej kolejności zaznaczenia.
Domyślnie kolejność zaznaczenia zawiera elementy HTML, które można naturalnie zaznaczyć, takie jak linki, pola wyboru i teksty. Elementy HTML, które można w naturalny sposób zaznaczyć, obejmują wbudowaną obsługę kolejności kart i podstawową obsługę zdarzeń z klawiatury.
Możesz zmienić kolejność zaznaczenia, aby uwzględnić w niej wszystkie elementy, które zwykle nie są w nim zaznaczone, np. nieinteraktywne elementy HTML, komponenty niestandardowe lub elementy z atrybutem ARIA, które zastępują semantykę naturalnego fokusu.
Indeks tabulacji
Kolejność zaznaczenia rozpoczyna się od elementów z dodatnim atrybutem tabindex (jeśli są określone) i przesuwa się od najmniejszej liczby dodatniej do największej (np. 1, 2, 3). Następnie przechodzi przez elementy z indeksem tabulacji równym 0 w zależności od kolejności elementów w DOM. Wszystkie elementy z ujemnym tabindex są usuwane z kolejności naturalnej ostrości.
Jeśli do elementów, których zwykle nie można zaznaczyć, stosowany jest indeks tabulacji o wartości 0 (tabindex="0"), są one dodawane w kolejności naturalnej ostrości na stronie, zgodnie ze sposobem wyświetlania w DOM. W przeciwieństwie do elementów HTML, które można naturalnie zaznaczyć, musisz zapewnić dodatkową obsługę klawiatury, aby były w pełni dostępne.
Podobnie jeśli masz element, który można zaznaczyć, ale jest nieaktywny (np. przycisk, który nie działa do czasu wypełnienia pola do wprowadzania danych), dodaj do niego ujemny indeks tabulacji (tabindex="-1"). Dodanie ujemnego tabindex informacji do technologii wspomagających i klawiatury, że ten przycisk powinien zostać usunięty z kolejności naturalnej ostrości. Bez obaw – w razie potrzeby
możesz użyć JavaScriptu, by ponownie uaktywnić ten element.
W tym przykładzie do elementów, które nie są w naturalny sposób skupione, dodano atrybut tabindex. Kolejność elementów została zmieniona za pomocą funkcji tabindex, aby zilustrować możliwości, jakie mogą mieć elementy w kolejności 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óre są spójne z innymi. Jest to świetne rozwiązanie w przypadku ogólnej nawigacji, ale może utrudniać użytkownikom, którzy mają tylko klawiaturę, przejście do głównej zawartości witryny bez konieczności wielokrotnego przechodzenia do niej.
Jednym ze sposobów przechodzenia nad zbędnymi lub nieprzydatnymi grupami linków jest dodanie linku pomijania. Linki pomijania to linki zakotwiczone, które przeskakują do innej sekcji tej samej strony, wykorzystując jej identyfikator, zamiast odsyłać użytkownika do innej strony w witrynie lub zasobu zewnętrznego. Linki pomijania są zwykle dodawane jako pierwszy element, który można zaznaczyć, gdy użytkownik otworzy witrynę. W zależności od tego, czego wymaga dany element w witrynie, może on być widoczny lub ukryty do momentu, gdy użytkownik kliknie dany element.
Gdy użytkownik naciśnie klawisz Tab, na którym znajduje się aktywny link pomijania, uaktywniony zostanie fokus klawiatury do tego linku. Użytkownik może kliknąć link pominięcia i przejść poza sekcję nagłówka i główne menu nawigacyjne. Jeśli użytkownik nie kliknie linku pomijania i przejdzie klawiszem Tab w dół DOM, zostanie przekierowany do następnego elementu, który można zaznaczyć.
Podobnie jak w przypadku wszystkich linków ważne jest, aby zawierał kontekst dotyczący przeznaczenia linku. Dodanie wyrażenia „Przejdź do głównej treści” informuje użytkownika, dokąd prowadzi link. Jest wiele opcji kodu do wyboru podczas podawania dodatkowego kontekstu linków, np. aria-labelledby lub aria-label albo do dodania 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 za pomocą klawiatury. Ważne jest też określenie stylu tego skupienia. Nawet jeśli kolejność fokusa jest doskonała, w jaki sposób użytkownik może ustalić położenie na stronie bez właściwego stylu?
Widoczny wskaźnik zaznaczenia to ważne narzędzie, które informuje użytkownika o tym, gdzie na stronie się aktualnie znajduje. Jest to szczególnie ważne dla osób, które widzą tylko klawiaturę.
Domyślny styl przeglądarki
Obecnie każda nowoczesna przeglądarka ma inny domyślny styl wizualny, który odnosi się do elementów witryny lub aplikacji, które można zaznaczyć. Niektóre z nich są lepiej widoczne niż inne. Ten styl jest stosowany, gdy użytkownik porusza się po stronie, gdy użytkownik porusza się po klawiaturze.
Jeśli zezwolisz przeglądarce na obsługę stylu zaznaczenia, musisz sprawdzić kod, by upewnić się, że motyw nie zastąpi domyślnego stylu przeglądarki. Zastępowanie jest często zapisywane w arkuszu stylów jako "outline: 0" lub "outline: none". Ten niewielki fragment kodu może usunąć domyślny styl wskaźnika fokusu w przeglądarce, co bardzo utrudnia użytkownikom poruszanie się po witrynie lub aplikacji.
a:focus {
outline: none; /* don't do this! */
}
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 fokusu, który będzie uzupełnić Twój motyw. Tworząc własny wskaźnik skupienia, masz dużą swobodę twórczą.
Kształt wskaźnika ostrości może przybierać różne formy, np. konturu, obramowania, podkreślenia, ramki, zmiany tła lub innej oczywistej zmiany stylistycznej, która nie zależy od koloru i sygnalizuje aktywność klawiatury w danym elemencie.
Możesz zmienić styl wskaźnika zaznaczenia, aby mieć pewność, że nie zniknie w tle. Jeśli na przykład strona ma białe tło, możesz ustawić wskaźnik zaznaczenia przycisku na niebieskie tło. Jeśli strona ma niebieskie tło, możesz ustawić ten sam styl zaznaczenia przycisku na białe tło.
Styl wybranego elementu możesz zmienić w zależności od jego typu. Na przykład w przypadku linków w treści możesz użyć podkreślonego kropką, a elementu przycisku – zaokrąglonego.
Nie ma reguły co do liczby stylów wskaźników zaznaczenia na jednej stronie, ale ich liczba musi być rozsądna, aby uniknąć niepotrzebnego pomylenia.
Podsumowanie
Aby witryna lub aplikacja została uznana za dostępną, dostęp do wszystkich elementów dostępnych za pomocą myszy musi być również możliwy przy użyciu klawiatury. Ten moduł koncentruje się na wizualnym aspekcie ułatwień dostępu klawiatury, w szczególności na wskaźnikach zaznaczenia i kolejności zaznaczenia.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę o ARIA i HTML
Który przykład stylu CSS :focus jest najbardziej przystępny na białym tle?
outline: 0.5rem solid yellow;background-color:black;text-decoration: dotted underline 2px blue;outline: none; text-decoration:none; background:none;Do czego służy link pomijania?