Ważność domyślnej kolejności DOM
Praca z natywnymi elementami 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ą wyświetlane 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 zmienić punkt początkowy nawigacji za pomocą fokusa, a następnie naciśnij Tab, aby przesuwać fokus między przyciskami.
<button style="float: right">I Should</button>
<button>Be Focused</button>
<button>Last!</button>
Zachowaj ostrożność podczas zmiany wizualnej pozycji elementów na ekranie za pomocą arkuszy 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 kontrolnej liście AIM dla witryn internetowych w sekcji 1.3.2 podano, że kolejność czytania i nawigacji określona przez kolejność kodu powinna być logiczna i intuicyjna.
Zasadniczo warto co jakiś czas przełączać się między kartami, aby sprawdzić, czy nie nastąpiło przypadkowe pomieszanie kolejności kart. 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 nadal muszą znajdować się w DOM, np. elastyczne menu boczne? Gdy takie elementy otrzymują fokus, gdy są poza ekranem, może się wydawać, że ten fokus znika i pojawia się ponownie, gdy użytkownik przewija stronę – co jest oczywiście niepożądanym efektem. 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 zaznaczony, możesz użyć w konsoli elementu document.activeElement.
Gdy już wiesz, który element poza ekranem ma być zaznaczony, możesz ustawić dla niego wartość display: none lub visibility: hidden, a potem przywrócić wartość display:
block lub visibility: visible, zanim wyświetlisz element 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 odpowiednio ukrywasz treści poza ekranem za pomocą atrybutów display: none lub visibility: hidden albo że zmieniasz pozycje elementów w DOM, aby były uporządkowane w logiczny sposób.