Modyfikowanie kolejności DOM za pomocą indeksu tabulacji
Domyślna kolejność kart zapewniana przez pozycję elementów natywnych w elemencie DOM jest wygodna, ale czasami konieczne jest zmodyfikowanie kolejności kart, a fizyczne przenoszenie elementów w kodzie HTML nie zawsze jest optymalne, a nawet możliwe. W takich przypadkach możesz użyć atrybutu HTML tabindex, aby wyraźnie określić pozycję karty elementu.
Typ tabindex można zastosować do dowolnego elementu, ale nie zawsze jest przydatny w każdym elemencie. Przyjmuje on zakres wartości całkowitych. Korzystając z tabindex, możesz określić kolejność elementów strony, które można zaznaczyć, wstawić do niej elementy, których nie da się zaznaczyć, oraz usuwać z niej elementy. Na przykład:
tabindex="0": wstawia element w naturalnej kolejności kart. Aby zaznaczyć element, naciśnij klawisz Tab. Aby go zaznaczyć, wywołaj jego metodę focus().
<custom-button tabindex="0">Press Tab to Focus Me!</custom-button>
tabindex="-1": usuwa element z naturalnej kolejności kart, ale nadal można go aktywować, wywołując metodę focus()
// TODO: DevSite - Code sample removed as it used inline event handlers
// DO ZROBIENIA: DevSite – usunięto przykładowy kod, ponieważ używał on wbudowanych modułów obsługi zdarzeń
tabindex="5": każdy indeks tabulacji większy niż 0 przeskakuje element na początek naturalnej kolejności kart. Jeśli wiele elementów ma indeks tabindex większy niż 0, kolejność zakładek rozpoczyna się od najmniejszej wartości, która jest większa od zera, i przesuwa się w górę. Użycie indeksu tabulacji większej niż 0 jest uważane za niezgodne z wzorcem.
<button>I should be first</button>
<button>And I should be second</button>
<button tabindex="5">But I jumped to the front!</button>
Dotyczy to zwłaszcza elementów niewprowadzających danych wejściowych, takich jak nagłówki, obrazy czy tytuły artykułów. Dodanie atrybutu tabindex do takich elementów przynosi skutek odwrotny do zamierzonego. Jeśli to możliwe, najlepiej tak rozmieścić kod źródłowy w taki sposób, aby sekwencja DOM zapewniała logiczną kolejność kart. Jeśli używasz tabindex, ogranicz go do niestandardowych elementów interaktywnych, takich jak przyciski, karty, menu i pola tekstowe, czyli elementów, które użytkownik może chcieć wprowadzić.
Nie przejmuj się, że użytkownicy czytników ekranu mogą przegapić ważne treści, ponieważ nie mają one tabindex. Nawet jeśli treść jest bardzo ważna, np. obraz,
jeśli użytkownik nie może z niej korzystać, nie ma powodu, żeby ją zaznaczać. Użytkownicy czytników ekranu nadal mogą rozumieć zawartość obrazów, jeśli zapewnisz odpowiednią obsługę atrybutu alt, którą za chwilę omówimy.
Zarządzanie fokusem na poziomie strony
W tym przykładzie funkcja tabindex jest nie tylko przydatna, ale też konieczna. Być może tworzysz pojedynczą stronę z różnymi sekcjami treści, które nie są widoczne w tym samym czasie. Kliknięcie linku nawigacyjnego na takiej stronie może zmienić widoczną zawartość bez jej odświeżania.
W takim przypadku wskaż wybrany obszar treści, podaj mu wartość tabindex równą -1, aby nie wyświetlał się w naturalnej kolejności kart, i wywołaj metodę focus. Ta technika, zwana zarządzaniem koncentracją, pozwala na synchronizowanie postrzeganego przez użytkownika kontekstu z treściami wizualnymi w witrynie.
Zarządzanie zaznaczeniem komponentów
Zarządzanie zaznaczeniem podczas wprowadzania zmian na stronie jest ważne, ale czasem trzeba to robić na poziomie kontroli, np. przy tworzeniu komponentu niestandardowego.
Weź pod uwagę natywny element select. Może on być podstawowy, ale gdy już się pojawi, możesz użyć klawiszy strzałek, aby pokazać dodatkowe funkcje (opcje do wyboru). Tworząc niestandardowy element select, warto uwzględnić tego typu zachowania, aby użytkownicy, którzy głównie korzystają z klawiatury, mogli korzystać z Twoich ustawień.
<!-- Focus the element using Tab and use the up/down arrow keys to navigate -->
<select>
<option>Aisle seat</option>
<option>Window seat</option>
<option>No preference</option>
</select>
Wskazanie odpowiedniego sposobu działania klawiatury może być trudne, ale możesz skorzystać z pomocnego dokumentu. W przewodniku dotyczącym praktyki tworzenia aplikacji internetowych z dostępem do ułatwień dostępu (ARIA) znajdziesz listę typów komponentów oraz obsługiwanych przez nie działań klawiszowych. Później omówimy funkcję ARIA bardziej szczegółowo, ale na razie polegamy na przewodniku, która pomaga dodać obsługę klawiatury do nowego komponentu.
Być może pracujesz nad nowymi elementami niestandardowymi, które przypominają zestaw przycisków, ale różnią się wyglądem i działaniem.
<radio-group>
<radio-button>Water</radio-button>
<radio-button>Coffee</radio-button>
<radio-button>Tea</radio-button>
<radio-button>Cola</radio-button>
<radio-button>Ginger Ale</radio-button>
</radio-group>
Aby dowiedzieć się, jakiego rodzaju klawiatury potrzebują, zapoznaj się z poradnikiem dotyczącym metod tworzenia treści ARIA. Sekcja 2 zawiera listę wzorców projektowych, a na niej tabelę charakterystyczną grup radiowych, czyli istniejącego komponentu, który najlepiej pasuje do nowego elementu.
Jak widać w tabeli, jednym z typowych działań klawiatury należy używać klawiszy strzałek w górę, w dół, w lewo i w prawo. Aby dodać to zachowanie do nowego komponentu, użyjemy metody roving tabindex.
Działanie indeksu tabulacji działa, gdy zasada tabindex ma wartość –1 dla wszystkich elementów podrzędnych z wyjątkiem elementu podrzędnego, które jest aktualnie aktywne.
<radio-group>
<radio-button tabindex="0">Water</radio-button>
<radio-button tabindex="-1">Coffee</radio-button>
<radio-button tabindex="-1">Tea</radio-button>
<radio-button tabindex="-1">Cola</radio-button>
<radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>
Następnie komponent używa detektora zdarzeń klawiatury do określenia, który klawisz naciska. Gdy to nastąpi, zmienia wartość -1 poprzednio wybranego elementu dziecka
tabindex na -1, ustawia wartość tabindex dziecka na 0 i wywołuje metodę fokusu.
<radio-group>
// Assuming the user pressed the down arrow, we'll focus the next available child
<radio-button tabindex="-1">Water</radio-button>
<radio-button tabindex="0">Coffee</radio-button> // call .focus() on this element
<radio-button tabindex="-1">Tea</radio-button>
<radio-button tabindex="-1">Cola</radio-button>
<radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>
Gdy użytkownik dotrze do ostatniego (lub pierwszego) – w zależności od kierunku, w którym przenosi zaznaczenie, następuje pętla i zaznaczenie pierwszego (lub ostatniego) elementu podrzędnego.
Gotowy przykład możesz zobaczyć poniżej. Sprawdź element w Narzędziach deweloperskich, aby zobaczyć, jak zmienia się indeks tabindex.
// DO ZROBIENIA: DevSite – usunięto przykładowy kod, ponieważ używał on wbudowanych modułów obsługi zdarzeń
Pełne źródło tego elementu znajdziesz na GitHubie.
Uchwyty modalne i pułapki na klawiaturę
Czasami, zarządzając koncentracją, można znaleźć się w sytuacji, z której nie można się wyjść. Rozważmy widżet autouzupełniania, który próbuje zarządzać zaznaczeniem działania karty i przechwytywać zachowanie karty, ale uniemożliwia użytkownikowi opuszczenie jej, dopóki nie skończy. Jest to tzw. pułapka klawiatury, która może być bardzo frustrująca dla użytkownika. Ten problem rozwiązuje artykuł 2.1.2 listy kontrolnej Web AIM, o którym stwierdzono, że nie należy blokować ani przyczepić klawiatury na jednym konkretnym elemencie strony. Użytkownik powinien mieć możliwość przechodzenia do wszystkich elementów strony i z powrotem przy użyciu samej klawiatury.
O dziwo, czasami takie zachowanie jest pożądane, na przykład w oknie modalnym. Zazwyczaj po wyświetleniu tego okna użytkownik nie powinien mieć dostępu do znajdujących się za nim treści. Możesz dodać nakładkę, która zakrywa stronę, ale nie powstrzyma to przed przypadkowym wysunięciem fokusu poza panel.
W takich sytuacjach możesz zastosować tymczasową blokadę klawiatury, aby zaznaczyć, że zaznaczenie będzie przyciągane tylko podczas wyświetlania okna modalnego, a następnie przywrócić zaznaczenie na poprzednio wybrany element, gdy okno modalne jest zamknięte.
Opracowaliśmy kilka pomysłów na ułatwienie pracy deweloperom, m.in. element
<dialog>, ale nie są one jeszcze powszechnie obsługiwane w przeglądarkach.Zapoznaj się z tym artykułem w MDN, aby dowiedzieć się więcej na temat
<dialog>, a także z tym przykładem modalnym, aby dowiedzieć się więcej o oknach modalnych.
Rozważmy okno modalne reprezentowane przez element div, który zawiera kilka elementów, oraz drugi element div reprezentujący nakładkę w tle. Przyjrzyjmy się podstawowym krokom,
które są niezbędne, by zastosować tymczasową blokadę klawiatury w tej sytuacji.
- Korzystając z
document.querySelector, wybierz elementy div w formacie modalnym i nakładkowym oraz zapisz ich odwołania. - Po otwarciu okna modalnego zapisz odniesienie do elementu, który był aktywny po otwarciu okna modalnego. Dzięki temu możesz ponownie zaznaczyć ten element.
- Użyj detektora klawiszy, aby chwytać klawisze podczas naciśnięcia, gdy okno modalne jest otwarte. Możesz też nasłuchiwać kliknięcia nakładki w tle i zamknąć okno, jeśli użytkownik ją kliknie.
- Następnie pobierz kolekcję elementów, które można zaznaczyć w oknie modalnym. Pierwszy i ostatni element, który można zaznaczyć, będą działać jako „strażnicy”, informując o pętli w przód, a w tył, aby pozostać w oknie modalnym.
- Wyświetl okno modalne i zaznacz pierwszy element, który można zaznaczyć.
- Gdy użytkownik naciska
TablubShift+Tab, przesuwaj zaznaczenie do przodu lub do tyłu, zapętlając odpowiednio ostatni lub pierwszy element. - Jeśli użytkownik naciśnie
Esc, zamknij okno. Jest to bardzo przydatne, ponieważ pozwala zamknąć okno bez wyszukiwania konkretnego przycisku zamykania, co przydaje się nawet użytkownikom korzystającym z myszy. - Gdy okno modalne jest zamknięte, ukryj go wraz z nakładką w tle, a następnie przywróć aktywny element, który został wcześniej zaznaczony.
Ta procedura daje przydatne, nieuciążliwe okno modalne, z którego każdy może skutecznie korzystać.
Aby dowiedzieć się więcej, możesz zapoznać się z tym przykładowym kodem i wyświetlić przykładowy kod z ukończonej strony.