L'ordine DOM è importante

L'importanza dell'ordine DOM predefinito

Dave Gash

Meggin Kearney

Rob Dodson

L'utilizzo di elementi nativi è un ottimo modo per scoprire di più sul comportamento dello stato attivo, poiché vengono inseriti automaticamente nell'ordine delle schede in base alla loro posizione nel DOM.

Ad esempio, potresti avere tre elementi pulsante, uno dopo l'altro nel DOM. Se premi Tab, viene attivato ogni pulsante in ordine. Prova a fare clic sul blocco di codice riportato di seguito per spostare il punto iniziale della navigazione, quindi premi Tab per spostare lo stato attivo tra i pulsanti.

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

Dovrei essere concentrati Per ultimo!

Tuttavia, è importante notare che, utilizzando CSS, è possibile che gli elementi esistano in un ordine nel DOM, ma che vengano visualizzati in un ordine diverso sullo schermo. Ad esempio, se utilizzi una proprietà CSS come float per spostare un pulsante a destra, i pulsanti verranno visualizzati in un ordine diverso sullo schermo. Tuttavia, poiché l'ordine nel DOM rimane lo stesso, lo stesso ordine delle schede è lo stesso. Quando l'utente scorre la pagina e i pulsanti vengono attivati in un ordine non intuitivo. Prova a fare clic sul blocco di codice riportato di seguito per spostare il punto di inizio della navigazione dello stato attivo, quindi premi Tab per spostare lo stato attivo tra i pulsanti.

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

Dovrei essere concentrati Infine!

Fai attenzione quando modifichi la posizione visiva degli elementi sullo schermo utilizzando CSS. Di conseguenza, l'ordine delle schede potrebbe variare, in modo apparentemente casuale e confondere gli utenti che si affidano alla tastiera. Per questo motivo, l'elenco di controllo AIM Web indica nella sezione 1.3.2 che l'ordine di lettura e navigazione, come determinato dall'ordine del codice, deve essere logico e intuitivo.

Come regola generale, prova a spostarti spesso nelle pagine per assicurarti di non aver involontariamente scomposto l'ordine delle schede. È una buona abitudine da adottare e non richiede molto impegno.

Contenuti fuori schermo

Cosa succede se hai contenuti che al momento non vengono visualizzati, ma devono ancora essere nel DOM, ad esempio una navigazione laterale reattiva? Quando elementi come questo ricevono l'elemento attivo quando non sono visualizzati sullo schermo, può sembrare che l'elemento attivo scompaia e riapparisca mentre l'utente scorre la pagina, con un effetto evidentemente indesiderato. Idealmente, dovremmo evitare che il riquadro si concentri quando non è attivo sullo schermo e consentire che lo stato attivo sia attivo solo quando l'utente può interagire con il riquadro.

A volte è necessario svolgere un po' di lavoro di detective per capire dove è finita l'attenzione. Puoi utilizzare document.activeElement dalla console per capire quale elemento è attualmente attivo.

Quando hai stabilito quale elemento fuori schermo è impostato sullo stato attivo, puoi impostarlo su display: none o visibility: hidden e quindi reimpostarlo su display: block o visibility: visible prima di mostrarlo all'utente.

In generale, invitiamo gli sviluppatori a navigare nei loro siti prima di ogni pubblicazione per vedere che l'ordine delle schede non scompare o non salta fuori da una sequenza logica. In caso affermativo, devi assicurarti di nascondere correttamente i contenuti fuori schermo con display: none o visibility: hidden oppure riordinare le posizioni fisiche degli elementi nel DOM in modo che siano in un ordine logico.