Znaczenie domyślnej kolejności DOM
Praca z elementami natywnymi to świetny sposób, by poznać zachowanie uwagi, ponieważ są one automatycznie wstawiane w kolejność kart na podstawie ich pozycji w DOM.
Na przykład możesz mieć 3 przyciski, jeden po drugim w DOM. Naciśnięcie Tab powoduje ustawienie kolejności poszczególnych przycisków w kolejności. Kliknij poniższy blok kodu, aby przenieść punkt początkowy nawigacji fokusa, a następnie naciśnij Tab, aby przenieść zaznaczenie między przyciskami.
<button>I Should</button>
<button>Be Focused</button>
<button>Last!</button>
Warto jednak pamiętać, że używając CSS, elementy mogą występować w jednej kolejności w DOM, ale w innej kolejności na ekranie. Jeśli na przykład przeniesiesz przycisk w prawo za pomocą właściwości CSS takiej jak float, przyciski na ekranie będą wyświetlać się w innej kolejności. Ponieważ jednak kolejność ich kart
w DOM pozostaje niezmieniona, Gdy użytkownik przechodzi przez stronę, przyciski aktywują się w nieintuicyjnej kolejności. Kliknij blok kodu poniżej, aby przenieść punkt początkowy nawigacji fokusa, a następnie naciśnij Tab, aby przenieść 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ć przeskakiwanie kart, a użytkownicy korzystający z klawiatury mogą wydawać się niespodzianki i dezorientować ich. Dlatego w sekcji 1.3.2 listy kontrolnej Web AIM wynika, że kolejność odczytu i nawigacji, określona według kolejności kodów, powinna być logiczna i intuicyjna.
Należy zazwyczaj przechodzić między stronami za pomocą klawisza Tab, aby upewnić się, że nie pogubisz się w porządku kolejności kart. To dobry nawyk, który nie wymaga wiele wysiłku.
Treści poza ekranem
Co zrobić, jeśli masz treści, które nie są aktualnie wyświetlane, ale mimo to muszą być w modelu DOM, na przykład w elastycznej nawigacji bocznej? Gdy takie elementy są wyróżnione, gdy znajdują się poza ekranem, może się wydawać, że zaznaczenie znika i pojawia się ponownie, gdy użytkownik naciska kolejne karty na stronie. Jest to niepożądany efekt. Powinniśmy zapobiec używaniu panelu, gdy znajduje się on poza ekranem, i umożliwić jego zaznaczenie tylko wtedy, gdy użytkownik może wejść z nim w interakcję.
Czasami trzeba przeprowadzić analizy,
aby dowiedzieć się, co tak naprawdę znika. Możesz użyć polecenia document.activeElement w konsoli, aby sprawdzić, który element jest obecnie zaznaczony.
Gdy dowiesz się, który element poza ekranem jest aktywny, możesz ustawić go na display: none lub visibility: hidden, a potem z powrotem na display:
block lub visibility: visible, zanim wyświetlisz go użytkownikowi.
Zachęcamy deweloperów do przeglądania witryny przed każdą publikacją, aby mieć pewność, że kolejność kart nie znika ani nie wychodzi z logicznej sekwencji. Jeśli tak, sprawdź, czy w odpowiednich przypadkach ukrywasz treści poza ekranem za pomocą tagów display: none lub visibility: hidden lub czy zmieniono położenie fizyczne elementów w DOM w taki sposób, by miały one logiczny porządek.