L'ordine DOM è importante

L'importanza dell'ordine DOM predefinito

Dave Gash

Meggin Kearney

Rob Dodson

Lavorare con elementi nativi è un ottimo modo per comprendere il comportamento di concentrazione perché vengono inserite automaticamente nell'ordine di tabulazione in base alle nel DOM.

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

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

Dovrei Concentrati Ultimo!

Tuttavia, è importante notare che, con il CSS, è possibile ottenere elementi esistono in un ordine nel DOM, ma vengono visualizzate in un ordine diverso sullo schermo. Per Ad esempio, se utilizzi una proprietà CSS come float per spostare un pulsante a destra, i pulsanti appaiono in un ordine diverso sullo schermo. Ma poiché il loro ordine il DOM rimane lo stesso, così come l'ordine delle schede. Quando l'utente scorre la pagina pagina, i pulsanti acquisiscono lo stato attivo in un ordine non intuitivo. Prova a fare clic blocco di codice riportato di seguito per spostare il punto iniziale della navigazione con lo stato attivo, quindi premi Tab per sposta lo stato attivo tra i pulsanti.

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

Dovrei Concentrati Ultimo!

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

Come regola generale, prova a spostarti spesso nelle pagine per verificare non hanno scomposto accidentalmente l'ordine delle schede. È una buona abitudine da adottare e che non richieda uno sforzo eccessivo.

Contenuti fuori schermo

E se ci sono dei contenuti che al momento non vengono visualizzati, ma che devono essere nel DOM, ad esempio una navigazione laterale reattiva? Quando hai elementi come questo, attivare lo stato attivo anche quando sono fuori schermo, può sembrare che l'elemento attivo sia scompare e riappaiono mentre l'utente scorre la pagina, chiaramente un effetto indesiderato. Idealmente, dovremmo evitare che il panel si concentri quando non è attivo sullo schermo e consentire la messa a fuoco solo quando l'utente può interagire con essa.

A volte è necessario svolgere un lavoro investigativo per capire su quali aspetti non sarà più disponibile. Puoi usare document.activeElement dalla console per capire quale attualmente attivo.

Quando sai quale elemento fuori schermo è impostato sullo stato attivo, puoi impostarlo su display: none o visibility: hidden e poi imposta il valore su display: block o visibility: visible prima di mostrarlo all'utente.

In generale, invitiamo gli sviluppatori a passare da un sito all'altro prima di ogni per vedere che l'ordine delle schede non scompare o non salta fuori da una sequenza sequenza. In caso affermativo, assicurati di nascondere correttamente contenuti fuori schermo con display: none o visibility: hidden o che tu per riordinare gli elementi" posizioni fisiche nel DOM, in modo che siano in ordine.