Znaczenie domyślnej kolejności DOM
Praca z elementami natywnymi to świetny sposób na poznanie zachowania fokusa, ponieważ są one automatycznie wstawiane do kolejności kart na podstawie ich pozycji w DOM.
Możesz na przykład mieć 3 elementy przycisku, jeden po drugim w DOM. Naciśnięcie Tab spowoduje kolejno skupienie na każdym przycisku. Kliknij blok kodu poniżej, aby zmienić punkt początkowy nawigacji z użyciem fokusa, a następnie naciśnij Tab, aby przesuwać fokus między przyciskami.
<button>I Should</button>
<button>Be Focused</button>
<button>Last!</button>
Pamiętaj jednak, że za pomocą CSS możesz umieścić elementy w pewnej kolejności w DOM, ale wyświetlić je w innej kolejności na ekranie. Jeśli na przykład użyjesz właściwości CSS, takiej jak float, aby przesunąć jeden przycisk w prawo, przyciski będą się wyświetlać w innej kolejności na ekranie. Jednak ponieważ ich kolejność w DOM pozostaje taka sama, nie zmienia się też kolejność kart. Gdy użytkownik przewija stronę za pomocą klawiszy strzałek, przyciski są zaznaczane w nieintuicyjnym porządku. Kliknij blok kodu poniżej, aby przenieść punkt początkowy nawigacji, a następnie naciśnij Tab, aby przenosić zaznaczenie między przyciskami.
<button style="float: right">I Should</button>
<button>Be Focused</button>
<button>Last!</button>
Zachowaj ostrożność, gdy zmieniasz wizualne położenie elementów na ekranie za pomocą CSS. Może to powodować, że kolejność kart zmienia się pozornie losowo, co może dezorientować użytkowników, którzy korzystają z klawiatury. Z tego powodu w sekcji 1.3.2 na liście kontrolnej Web AIM stwierdzamy, że kolejność czytania i nawigacji zgodnie z kolejnością kodu powinna być logiczna i intuicyjna.
Zwykle warto co jakiś czas przełączać się między kartami, aby sprawdzić, czy nie nastąpiło przypadkowe pomieszanie ich kolejności. Warto wyrobić sobie ten nawyk, ponieważ nie wymaga on wiele wysiłku.
Treści poza ekranem
Co zrobić, jeśli masz treści, które nie są obecnie wyświetlane, ale muszą znajdować się w modelu DOM, np. elastyczne boczne elementy nawigacyjne? Jeśli elementy tego typu są zaznaczone, gdy są poza ekranem, może się wydawać, że zaznaczenie znika i powraca w miarę przeglądania strony przez użytkownika – jest to wyraźnie niepożądany efekt. W idealnej sytuacji panel nie powinien być aktywny, gdy jest poza ekranem, a użytkownik powinien mieć możliwość korzystania z niego tylko wtedy, gdy może z nim wchodzić w interakcję.
Czasami trzeba trochę podziałać jak detektyw, aby dowiedzieć się, gdzie się znajduje punkt skupienia. Aby sprawdzić, który element jest obecnie aktywny, możesz użyć w konsoli document.activeElement.
Gdy ustalisz, który element poza ekranem jest zaznaczony, możesz ustawić go na display: none lub visibility: hidden, a następnie z powrotem na display:
block lub visibility: visible, zanim wyświetlisz go użytkownikowi.
Ogólnie zachęcamy deweloperów, aby przed każdą publikacją przeglądali swoje witryny, aby sprawdzić, czy kolejność kart się nie zmienia ani nie wychodzi poza logiczną sekwencję. Jeśli tak, upewnij się, że prawidłowo ukrywasz treści poza ekranem za pomocą znaków display: none lub visibility: hidden, albo zmień położenie fizyczne elementów w DOM tak, aby znajdowały się w porządku logicznym.