Znaczenie domyślnej kolejności DOM
Praca z elementami natywnymi to świetny sposób na poznanie zachowania fokusu, ponieważ są one automatycznie wstawiane do kolejności kart na podstawie ich pozycji w DOM.
Możesz mieć na przykład 3 elementy przycisków, jeden po drugim w DOM. Naciśnięcie Tab powoduje zaznaczenie kolejnych przycisków. Kliknij blok kodu poniżej, aby przenieść punkt początkowy nawigacji, a następnie naciśnij Tab, aby przechodzić między przyciskami.
<button>I Should</button>
<button>Be Focused</button>
<button>Last!</button>
Warto jednak pamiętać, że za pomocą CSS można sprawić, że elementy będą występować w jednej kolejności w DOM, ale będą wyświetlane na ekranie w innej kolejności. 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 na ekranie w innej kolejności. Jednak ich kolejność w DOM pozostaje taka sama, więc kolejność tabulacji też się nie zmienia. Gdy użytkownik przechodzi po stronie za pomocą klawisza Tab, przyciski są zaznaczane w nieintuicyjnej kolejności. Spróbuj kliknąć blok kodu poniżej, aby przenieść punkt początkowy nawigacji, a następnie naciśnij Tab, aby przechodzić między przyciskami.
<button style="float: right">I Should</button>
<button>Be Focused</button>
<button>Last!</button>
Zachowaj ostrożność podczas zmieniania wizualnej pozycji elementów na ekranie za pomocą CSS. Może to spowodować, że kolejność kart będzie się zmieniać, pozornie losowo, co może być mylące dla użytkowników korzystających z klawiatury. Z tego powodu lista kontrolna Web AIM zawiera w sekcji 1.3.2 informację, że kolejność odczytu i nawigacji, określona przez kolejność kodu, powinna być logiczna i intuicyjna.
Zasadniczo warto co jakiś czas sprawdzić, czy nie doszło do przypadkowego zaburzenia kolejności kart. Warto wyrobić sobie taki nawyk, ponieważ nie wymaga on dużego 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. responsywny panel boczny? Gdy masz takie elementy, które są zaznaczane, gdy są poza ekranem, może się wydawać, że zaznaczenie znika i pojawia się, gdy użytkownik przechodzi przez stronę za pomocą klawisza Tab. Jest to oczywiście niepożądany efekt. Najlepiej byłoby, gdyby panel nie mógł być zaznaczany, gdy jest poza ekranem, i było to możliwe tylko wtedy, gdy użytkownik może wejść z nim w interakcję.
Czasami trzeba trochę poszukać, aby dowiedzieć się, gdzie jest fokus. Możesz użyć elementu document.activeElement w konsoli, aby dowiedzieć się, który element jest obecnie zaznaczony.
Gdy już wiesz, który element poza ekranem jest zaznaczony, możesz ustawić go na display: none lub visibility: hidden, a następnie przywrócić ustawienie display:
block lub visibility: visible, zanim pokażesz go użytkownikowi.
Ogólnie zachęcamy deweloperów do przechodzenia przez witryny za pomocą klawisza Tab przed każdą publikacją, aby sprawdzić, czy kolejność kart nie znika lub nie odbiega od logicznej sekwencji. Jeśli tak, upewnij się, że odpowiednio ukrywasz treści poza ekranem za pomocą display: none lub visibility: hidden albo że zmieniasz fizyczne pozycje elementów w DOM, aby były w logicznej kolejności.