L'importanza dell'ordine DOM predefinito
Lavorare con gli elementi nativi è un ottimo modo per imparare il comportamento dello stato attivo, 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. Se premi 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 che gli elementi esistano in un ordine nel DOM, ma 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 vengono visualizzati in un ordine diverso sullo schermo. Tuttavia, poiché il loro ordine nel DOM rimane invariato, anche l'ordine di tabulazione rimane invariato. Quando l'utente scorre la pagina con il tasto Tab, lo stato attivo viene applicato ai pulsanti 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 CSS. Ciò può causare il salto dell'ordine di tabulazione, apparentemente in modo casuale, confondendo gli utenti che si affidano alla tastiera. Per questo motivo, l'elenco di controllo di WebAIM indica nella sezione 1.3.2 che l'ordine di lettura e navigazione, determinato dall'ordine del codice, deve essere logico e intuitivo.
Come regola generale, prova a spostarti tra le pagine di tanto in tanto per assicurarti di non aver modificato accidentalmente l'ordine di tabulazione. È una buona abitudine da adottare e non richiede molto impegno.
Contenuti fuori schermo
Cosa succede se hai contenuti che non sono attualmente visualizzati, ma che devono comunque essere presenti nel DOM, come una barra di navigazione laterale adattabile? Quando hai elementi come questo che ricevono lo stato attivo quando sono fuori dallo schermo, può sembrare che lo stato attivo scompaia e riappaia mentre l'utente si sposta nella pagina con il tasto Tab, un effetto chiaramente indesiderato. Idealmente, dovremmo impedire al riquadro di acquisire lo stato attivo quando è fuori schermo e consentire l'acquisizione dello stato attivo solo quando l'utente può interagire con il riquadro.
A volte devi fare un po' di lavoro investigativo per capire dove è finito lo stato attivo. Puoi utilizzare document.activeElement dalla console per capire quale elemento è attualmente attivo.
Una volta individuato l'elemento fuori schermo su cui è impostato lo stato attivo, puoi impostarlo su display: none o visibility: hidden, quindi reimpostarlo su display:
block o visibility: visible prima di mostrarlo all'utente.
In generale, consigliamo agli sviluppatori di scorrere i loro siti con il tasto Tab prima di ogni pubblicazione per verificare che l'ordine di tabulazione 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 un ordine logico.