Sequenza significativa
Quando l'ordine di lettura del contenuto è rilevante per la comprensione, l'ordine nel DOM deve corrispondere all'ordine visivo. Il posizionamento CSS e il float che alterano la sequenza compromettono i lettori di schermo e la navigazione da tastiera.
Cosa richiede
Se il significato del contenuto dipende dall’ordine in cui viene letto — istruzioni, narrazione, un processo passo dopo passo — quell’ordine deve essere preservato nel DOM. I lettori di schermo e i motori di ridisposizione percorrono il documento nell’ordine del sorgente; se CSS order, position: absolute, flex-direction: row-reverse o il posizionamento nella griglia alterano l’ordine visivo rispetto all’ordine del DOM, l’esperienza ne risulta compromessa.
Come soddisfarlo
- Scrivere il DOM nell’ordine in cui il contenuto deve essere letto; usare CSS per il posizionamento visivo, non per stabilire la sequenza.
- Verificare ogni uso di
flex-direction: row-reverse, CSSorderogrid-areache sposti il contenuto dalla sua posizione nel sorgente. - Nei layout multi-colonna, inserire le colonne nel DOM nell’ordine di lettura, non nell’ordine visivo delle colonne.
- Testare disabilitando il CSS (strumenti per sviluppatori del browser, «visualizza ordine del sorgente») — il flusso non stilizzato deve comunque avere senso.
- Scorrere la pagina con un lettore di schermo e annotare ogni momento in cui l’ordine di annuncio sorprende.
Errori comuni
- Una barra laterale visivamente a destra ma posizionata prima nel DOM — i lettori di schermo annunciano annunci, link correlati e CTA prima dell’articolo principale.
flex-direction: row-reversesu un menu di navigazione — gli utenti vedenti leggono Home / Chi siamo / Contatti, i lettori di schermo annunciano Contatti / Chi siamo / Home.- CSS
ordersui campi del modulo che riordina l’ordine visivo rispetto all’ordine del DOM, causando salti imprevedibili con il tasto Tab. - Link «Vai al contenuto» posizionato dopo la navigazione nel DOM ma collocato visivamente in alto con posizionamento assoluto — gli utenti da tastiera raggiungono prima la navigazione.
- Schede in una griglia che visivamente scorrono da sinistra a destra ma sono inserite nel DOM dal basso verso l’alto a causa di un espediente di griglia.
Perché è importante
Gli errori di sequenza significativa sono subdoli — la pagina appare corretta, supera la validazione e passa la maggior parte dei controlli automatici. Emergono solo quando un utente reale che usa un lettore di schermo cerca di leggere la pagina dall’alto verso il basso. La maggior parte delle correzioni consiste in piccoli riordinamenti del DOM, ma il costo diagnostico per individuare il problema è elevato.