L'importanza dell'ordine DOM predefinito
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 di pulsante, uno dopo l'altro nel DOM. Premendo Tab viene selezionato ogni pulsante in ordine. Prova a fare clic sul blocco di codice
di seguito per spostare il punto di partenza della navigazione con lo stato attivo, quindi premi Tab per spostare lo stato attivo
tra i pulsanti.
<button>I Should</button>
<button>Be Focused</button>
<button>Last!</button>
Tuttavia, è importante notare che, utilizzando CSS, è possibile avere elementi
in un ordine nel DOM, ma visualizzarli 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 di seguito per spostare il punto di partenza della navigazione con lo 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>
Fai attenzione quando modifichi la posizione visiva degli elementi sullo schermo utilizzando il CSS. Ciò può causare un salto dell'ordine delle schede, apparentemente in modo casuale, confondendo 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 comunque essere nel DOM, ad esempio un menu laterale adattabile? 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 fare un po' di lavoro investigativo per capire dove è andato il focus. Puoi utilizzare document.activeElement dalla console per capire quale
elemento è attualmente selezionato.
Una volta che sai quale elemento off screen è attivo, puoi impostarlo su
display: none o visibility: hidden, quindi ripristinarlo su display:
block o visibility: visible prima di mostrarlo all'utente.
In generale, invitiamo gli sviluppatori a passare da una scheda all'altra dei loro siti prima di ogni pubblicazione per verificare che l'ordine delle schede non scompaia o non esca da una sequenza logica. In questo caso, assicurati di nascondere adeguatamente i contenuti offscreen con display: none o visibility: hidden oppure di riorganizzare le posizioni fisiche degli elementi nel DOM in modo che siano in un ordine logico.