L'ordine logico dei tab segue i contenuti
Faccia muovere il focus nell'ordine in cui le persone leggono.
L'ordine logico dei tab segue i contenuti è una lezione Web Accessibility Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Web Accessibility Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Web Accessibility Academy include 4 lezioni in totale.
Il focus segue un percorso
Prema Tab e il focus seguirà un percorso fisso attraverso la pagina. Questo percorso è l'ordine di tabulazione e configurarlo correttamente aiuta gli utenti a orientarsi. 🧭
Segue il DOM
Per impostazione predefinita, l'ordine di tabulazione corrisponde all'ordine nel codice sorgente, ovvero alla sequenza degli elementi dall'alto verso il basso nell'HTML, non a ciò che vede sullo schermo.
L'ordine di lettura dovrebbe corrispondere
Faccia in modo che il focus si sposti nello stesso ordine in cui le persone leggono la pagina. Prima l'intestazione, poi il contenuto principale e infine il piè di pagina: è un ordine naturale.
Il CSS può ingannare
Strumenti di layout come flexbox order spostano visivamente i riquadri, ma lasciano invariato il DOM. Il focus continua a seguire il codice sorgente, quindi i due ordini possono non coincidere.
.cards { display: flex; }
.featured { order: -1; }La trappola del riordinamento
Quando il CSS riordina gli elementi, un utente della tastiera può saltare avanti e indietro in modo imprevisto. La soluzione è allineare l'ordine HTML a quello visivo.
Non usi mai un tabindex positivo
Un tabindex positivo, come 3, porta forzatamente un controllo all'inizio dell'ordine. Quasi sempre crea una situazione confusa e difficile da gestire.
<button tabindex="3">Avoid this</button>L'ordine nel codice sorgente è la vera soluzione
Anziché correggere il problema con tabindex, inserisca semplicemente gli elementi nell'ordine corretto nel markup. Un ordine pulito nel codice sorgente non richiede attributi speciali.
Gli elementi nascosti vengono esclusi
Un elemento con display none viene completamente rimosso dall'ordine di tabulazione. Quando lo mostra di nuovo, torna silenziosamente nella posizione prevista dal DOM.
Faccia attenzione agli inserimenti dinamici
Quando JavaScript inserisce nuovi controlli, questi finiscono nel punto in cui li aggiunge. Li inserisca in una posizione sensata, così l'ordine rimarrà logico.
Le finestre modali richiedono attenzione
Una finestra di dialogo aggiunta alla fine della pagina può lasciare il focus molto lontano. Una buona gestione del focus porta gli utenti nella finestra modale all'apertura.
Verifichi usando Tab
La verifica è semplice. Usi Tab dall'inizio e confermi che il focus si sposti in un ordine sensato, senza salti imprevisti sullo schermo.
Verifica rapida
Decida cosa determina davvero l'ordine di tabulazione predefinito.
Riepilogo: ordine di tabulazione logico
Mantenga il movimento del focus coerente con il modo in cui le persone leggono. Abbini l'ordine nel codice sorgente al layout visivo, eviti tabindex positivi e verifichi il risultato con Tab. ✅
Impara HTML con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 30
- Lezioni
- 120
Domande Frequenti
La lezione «L'ordine logico dei tab segue i contenuti» è gratuita?
Sì — il testo completo di «L'ordine logico dei tab segue i contenuti» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Web Accessibility Academy, passa a CoddyKit PRO. Il corso Web Accessibility Academy include 4 lezioni in totale.
Cosa imparerò in «L'ordine logico dei tab segue i contenuti»?
Faccia muovere il focus nell'ordine in cui le persone leggono. Eserciti Web Accessibility Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Web Accessibility Academy?
Non è richiesta alcuna esperienza precedente. Web Accessibility Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.
Quanto tempo richiede la lezione «L'ordine logico dei tab segue i contenuti»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Web Accessibility Academy?
Sì. Ogni lezione Web Accessibility Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Tab, Shift+Tab, Enter, Space: i tasti fondamentali
- Focus visibile: non nasconda mai il contorno
- L'ordine logico dei tab segue i contenuti
- Individuare le trappole da tastiera