Importanza dell'ordine DOM predefinito
Gli elementi nativi sono un ottimo modo per conoscere il comportamento dell'elemento attivo perché 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. La pressione di Tab attiva ogni pulsante in ordine. Prova a fare clic sul blocco di codice riportato di seguito per spostare lo stato attivo sul punto di partenza della navigazione, quindi premi Tab per spostare lo stato attivo attraverso i pulsanti.
<button>I Should</button>
<button>Be Focused</button>
<button>Last!</button>
Tuttavia, è importante notare che, utilizzando CSS, è possibile che gli elementi esistano in un ordine nel DOM ma appaiano in un ordine diverso sullo schermo. Ad esempio, se utilizzi una proprietà CSS come float per spostare un pulsante a destra, i pulsanti vengono visualizzati in un ordine diverso sullo schermo. Tuttavia, l'ordine delle schede nel DOM rimane invariato, così come l'ordine delle schede. Quando l'utente scorre la 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 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 cambi la posizione visiva degli elementi sullo schermo utilizzando CSS. Di conseguenza, l'ordine delle schede potrebbe spostarsi, apparentemente a caso, confondendo gli 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 navigazione, come determinato dall'ordine del codice, deve essere logico e intuitivo.
Come regola generale, prova a spostarti spesso tra le pagine per assicurarti di non aver rovinato accidentalmente l'ordine delle schede. È una buona abitudine da adottare e non richiede molto impegno.
Contenuti fuori schermo
E se hai dei contenuti che al momento non vengono visualizzati, ma devono essere ancora nel DOM, ad esempio una barra di navigazione laterale reattiva? Quando ci sono elementi come questo che vengono attivati quando sono fuori schermo, può sembrare che l'elemento attivo scompare e riappari mentre l'utente scorre la pagina nella pagina, ovvero un effetto chiaramente indesiderato. Idealmente, dovremmo evitare che il riquadro diventi attivo quando è fuori schermo e fare in modo che lo sia solo quando l'utente può interagire con il riquadro.
A volte è necessario svolgere un po' di investigazione per capire dove è finita l'attenzione. Puoi utilizzare document.activeElement dalla console per capire quale elemento è attualmente attivo.
Quando sai quale elemento fuori schermo è attivo, puoi impostarlo su
display: none o visibility: hidden, quindi impostarlo di nuovo su display:
block o visibility: visible prima di mostrarlo all'utente.
In generale, invitiamo gli sviluppatori a sfogliare i 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 in modo appropriato i contenuti fuori schermo con display: none o visibility: hidden oppure di riorganizzare le posizioni fisiche degli elementi nel DOM in modo che siano in ordine logico.