L'ordine DOM è importante

L'importanza dell'ordine DOM predefinito

Dave Gash

Meggin Kearney

Rob Dodson

Lavorare con gli elementi nativi è un ottimo modo per conoscere il comportamento dell'attenzione perché vengono inseriti automaticamente nell'ordine di tabulazione in base alla loro posizione nel DOM.

Ad esempio, potresti avere tre elementi pulsante, uno dopo l'altro nel DOM. Premendo 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 verso destra, i pulsanti vengono visualizzati sullo schermo in un ordine diverso. Tuttavia, poiché l'ordine nel DOM rimane invariato, lo stesso vale per l'ordine di tabulazione. Quando l'utente passa da una scheda all'altra della pagina, i pulsanti diventano attivi 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, la lista di controllo AIM web afferma nella sezione 1.3.2 che l'ordine di lettura e navigazione, come stabilito dall'ordine del codice, deve essere logico e intuitivo.

Come regola generale, prova a passare da una pagina all'altra di tanto in tanto per assicurarti di non aver scombinato accidentalmente 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 hai elementi come questo che recebemo il fuoco quando non sono sullo schermo, può sembrare che scompaia e riappaia mentre l'utente scorre la pagina, un effetto chiaramente indesiderato. Idealmente, dovremmo impedire al riquadro di acquisire il focus quando è fuori dallo schermo e consentirgli di acquisire il focus solo quando l'utente può interagire con esso.

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.