Accessibilità: controllare e modificare l'ordine DOM di un sito
6 min
In questo articolo:
- Ordine DOM sui siti
- Perché l'ordine DOM è importante
- DOM automatico nel Wizard accessibilità
- Modificare manualmente l'ordine DOM di un sito
L'ordine DOM di un sito è l'ordine in cui gli screen reader e il tasto Tab evidenziano e/o "leggono" il contenuto della pagina. Dovrebbe seguire un ordine logico per garantire che i visitatori ottengano la migliore esperienza possibile sul sito e possano navigare e goderne il contenuto.
Ordine DOM sui siti
Il DOM del sito è l'ordine di caricamento e lettura degli elementi sulle pagine del sito. Wix imposta automaticamente un ordine DOM in base all'ordine visivo degli elementi; da sinistra a destra e dall'alto verso il basso. Quando sviluppiamo i nostri strumenti per l'accessibilità, testiamo i nostri prodotti utilizzando i seguenti screen reader:
- Windows + Firefox o Chrome: NVDA (lettore gratuito)
- iOS + Safari: Voiceover (lettore integrato)
Ciò significa che abbiamo creato l'ordine DOM automatico del tuo sito pensando alle funzioni delle applicazioni sopra riportate.
Importante:
L'ordine DOM automatico sui siti Wix desktop è stato creato per gli script da sinistra a destra (es. inglese, spagnolo, ecc.). Se il tuo sito utilizza una scrittura da destra a sinistra come l'arabo o l'ebraico, devi riorganizzare manualmente l'ordine DOM nel pannello Livelli.
Perché l'ordine DOM è importante
Alcuni visitatori del sito potrebbero utilizzare screen reader e altre tecnologie assistive per navigare sul tuo sito. Queste tecnologie assistono i visitatori con disabilità visive scansionando il contenuto del sito e leggendolo ad alta voce per il visitatore.
I visitatori che utilizzano screen reader, così come quelli con condizioni che influiscono sulla mobilità, possono utilizzare il tasto Tab per navigare tra i contenuti del tuo sito. L'ordine DOM del sito è quindi importante per i visitatori che utilizzano gli screen reader e/o il tasto Tab, in quanto devono poter navigare nel tuo sito in un ordine logico.
Ad esempio, il menu del sito dovrebbe venire prima, seguito dal resto degli elementi nell'intestazione, quindi dal titolo della pagina, quindi dal contenuto della pagina, eccetera. Se l'ordine DOM non è corretto, lo screen reader/tasto Tab potrebbe saltare o saltare il contenuto della pagina.
Vuoi testare l'ordine DOM del tuo sito?
Puoi testare l'ordine DOM automatico di un sito utilizzando il tasto Tab della tastiera o uno screen reader nella versione online del sito.
DOM automatico nel Wizard accessibilità
Quando lavori su un sito Editor Studio, potresti vedere l'opzione per organizzare automaticamente il suo ordine DOM nel Wizard accessibilità. Ti consigliamo di selezionare questa opzione, in quanto garantisce che la scansione del Wizard e le attività risultanti siano corrette.
Non vedi questa casella di spunta?
L'opzione per organizzare il DOM del sito non viene compilata se:
- Il sito è stato creato dopo l'inizio di novembre 2024
- Hai già organizzato il DOM del sito con il Wizard accessibilità
- Hai disabilitato il DOM automatico sul sito
Modificare manualmente l'ordine DOM di un sito
Se noti che l'ordine DOM del tuo sito non è logico, ti consigliamo di modificarlo per garantire un'esperienza migliore ai visitatori.
Usa il Wizard accessibilità e il pannello Livelli per modificare il DOM sui siti dell'Editor Wix. Se stai creando un sito nell'Editor Studio, puoi modificare l'ordine con i pannelli Livelli e Pagine del sito.
Importante:
Se l'ordine di tabulazione del tuo sito è logico, non devi fare nulla. Modificare l'ordine quando è già corretto può causare problemi ai visitatori che utilizzano gli screen reader e/o il tasto Tab.
Per modificare l'ordine DOM:
Editor Wix
Editor Studio
Poiché Wix imposta automaticamente un ordine DOM per il tuo sito, devi disabilitarlo nelle impostazioni avanzate del Wizard accessibilità. Puoi quindi modificare manualmente l'ordine DOM degli elementi nel pannello Livelli del tuo sito, in base alle tue esigenze.
Per modificare le impostazioni DOM e l'ordine del tuo sito:
- Vai al tuo Editor
- Clicca su Impostazioni in alto e seleziona Wizard accessibilità
- Clicca sull'icona Altre azioni nella parte superiore del pannello del Wizard accessibilità
- Seleziona Impostazioni avanzate per l'accessibilità
- Seleziona Ordine DOM automatico
- Disabilita l'interruttore nel pannello
- Seleziona Disattiva nella finestra pop-up
nella parte superiore del pannello del Wizard accessibilità 
- Seleziona Livelli in basso a sinistra dell'Editor
- Controlla l'elenco ed elimina tutti gli elementi ridondanti. Ciò include elementi duplicati che non hanno un uso sul tuo sito e possono confondere gli utenti di screen reader
- Trascina gli elementi rimanenti nell'ordine desiderato
in basso a sinistra dell'Editor
Qual è il prossimo passo?
Apri l'Editor mobile e ripeti gli stessi passaggi.
Note:
- La navigazione in un sito utilizzando il tasto Tab consente di spostarsi solo tra gli elementi interattivi e non gli elementi statici, come il testo. Se vuoi testare uno screen reader su elementi statici come il testo, segui le istruzioni nel centro assistenza dello screen reader su come navigare correttamente in un sito web con una tastiera
- Gli elementi bloccati vengono posizionati automaticamente alla fine della sequenza di tabulazioni. Se vuoi che vengano visualizzati prima nella sequenza, ti consigliamo di sbloccarli e posizionarli nell'intestazione
Qual è il prossimo passo?
Torna alla Checklist per l'accessibilità per continuare a lavorare sull'accessibilità del tuo sito.