Kolejność DOM ma znaczenie

Znaczenie domyślnej kolejności DOM

Dave Gash

Meggin Kearney

Rob Dodson

Praca z elementami natywnymi to świetny sposób na poznanie zachowań ponieważ są one automatycznie wstawiane w kolejności, w jakiej są pozycji w DOM.

Na przykład możesz mieć trzy elementy przycisków umieszczone jeden po drugim DOM. 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 przy użyciu przycisków.

<button>I Should</button>
<button>Be Focused</button>
<button>Last!</button>

Chcę Skupienie Na koniec

Warto jednak zauważyć, że przy użyciu CSS można mieć różne występują w jednej kolejności w DOM, ale pojawiają się w innej kolejności na ekranie. Dla: Jeśli np. użyjesz właściwości CSS, takiej jak float, aby przenieść jeden przycisk w prawo, przyciski wyświetlają się na ekranie w innej kolejności. Ponieważ jednak ich kolejność DOM pozostaje taki sam. Gdy użytkownik otworzy kartę na stronie, przyciski zaczną się pojawiać w nieintuicyjnej kolejności. Kliknij blok kodu poniżej, aby przenieść punkt początkowy nawigacji, naciśnij Tab, aby przełączać zaznaczenie między przyciskami.

<button style="float: right">I Should</button>
<button>Be Focused</button>
<button>Last!</button>

Chcę Skupienie się Na koniec

Zachowaj ostrożność, gdy zmieniasz wizualne położenie elementów na ekranie za pomocą CSS. Może to spowodować zmianę kolejności kart, pozornie przypadkową i dezorientującą. którzy korzystają z klawiatury. Z tego powodu na liście kontrolnej Web AIM w sekcji 1.3.2 że kolejność czytania i nawigacji zgodnie z kolejnością kodu powinna być logiczny i intuicyjny.

Staraj się co jakiś czas przechodzić między stronami za pomocą klawisza Tab, aby mieć pewność, czy kolejność kart nie została przypadkowo zmieniona. To dobry nawyk i które nie wymaga wiele wysiłku.

Treści poza ekranem

Co zrobić, jeśli masz treści, które nie są obecnie wyświetlane, a które wymagają w DOM, np. w elastycznym bocznym panelu nawigacyjnym? Jeśli masz takie elementy gdy użytkownik jest poza ekranem, może wydawać się, że skupienie znikają i pojawiają się ponownie, gdy karty użytkownika są widoczne na stronie. niepożądany efekt. Należy unikać skupiania się na panelu, gdy jest poza ekranem, i koncentruj się tylko wtedy, gdy użytkownik może wejść w interakcję. z nim.

Czasem musisz przeprowadzić detektywi, aby ustalić, w którym miejscu – nie było Cię tutaj. Za pomocą atrybutu document.activeElement w konsoli możesz sprawdzić, który aktualnie zaznaczony element.

Gdy ustalisz, który element poza ekranem jest zaznaczony, możesz go ustawić na display: none lub visibility: hidden, a następnie ustaw ją z powrotem na display: block lub visibility: visible, zanim wyświetlisz ją użytkownikowi.

Ogólnie zachęcamy deweloperów do przeglądania witryn przed każdym Opublikuj, aby kolejność kart nie znikała ani nie wychodziła z logiki kolejne wartości. Jeśli tak, upewnij się, że ukrywasz się odpowiednio. treści poza ekranem przy użyciu: display: none lub visibility: hidden albo zmień kolejność elementów” fizyczne położenia w DOM, są więc zamówienie.