Znaczenie domyślnej kolejności DOM
Praca z elementami natywnymi to świetny sposób na poznanie charakterystycznego zachowania, ponieważ elementy te są automatycznie wstawiane w kolejności kart na podstawie swojego położenia w DOM.
Na przykład w DOM mogą znajdować się 3 elementy przycisków umieszczone jeden po drugim. Naciśnięcie Tab powoduje zaznaczenie po kolei wszystkich przycisków. Kliknij blok kodu poniżej, aby przenieść punkt początkowy nawigacji, a następnie naciśnij Tab, aby przenieść zaznaczenie.
<button>I Should</button>
<button>Be Focused</button>
<button>Last!</button>
Warto jednak pamiętać, że korzystając z CSS, może się zdarzyć, że elementy
istnieją w jednej kolejności w DOM, ale pojawią się w innej kolejności na ekranie. Jeśli na przykład używasz właściwości CSS, takiej jak float, aby przenieść jeden przycisk w prawo, przyciski wyświetlają się w innej kolejności na ekranie. Ponieważ jednak kolejność elementów
w DOM pozostaje taka sama, Gdy użytkownik przegląda stronę, przyciski są skupione w nieintuicyjnej kolejności. 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 spowodować zmienność kolejności kart, pozornie przypadkowe i dezorientujące 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.
Staraj się co jakiś czas przechodzić między stronami za pomocą klawisza Tab, by mieć pewność, że ich kolejność nie została przypadkowo zmieniona. 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ą 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. Powinniśmy zadbać o to, aby panel nie przyciągał uwagi, gdy jest wyłączony, i być skupiony tylko wtedy, gdy użytkownik może z niego wejść w interakcję.
Czasem musisz przeprowadzić detektywi, aby zrozumieć,
co jest w Twojej głowie. 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 programistów, by przed publikacją witryny sprawdzać zawartość za pomocą klawisza Tab, aby kolejność kart nie znikała i nie opuszczała logicznej sekwencji. 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.