Spostare il focus sul primo errore
Portare l'utente direttamente su ciò che deve correggere
Spostare il focus sul primo errore è 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.
Perso dopo l’invio
Un utente invia il modulo, la pagina mostra gli errori in alto, ma il focus rimane sul pulsante. Non ha idea che qualcosa sia fallito. 😕
Spostare il focus sul problema
Quando l’invio non va a buon fine, sposti il focus sul primo campo non valido. L’utente arriva esattamente al punto da cui iniziare la correzione, senza doverlo cercare.
Utilizzare focus in JS
Individui il primo controllo non valido e chiami focus() su di esso. In questo modo sia gli utenti da tastiera sia quelli che usano uno screen reader iniziano dal punto giusto.
const first = form.querySelector("[aria-invalid='true']");
if (first) first.focus();Leggere nome, tipo ed errore
Quando il focus arriva lì, lo screen reader annuncia contemporaneamente il nome del campo, il fatto che sia invalid e l’errore descritto.
Il primo, non uno casuale
Porti sempre il focus sul primo errore nell’ordine del documento. Passare a un campo successivo fa saltare problemi che l’utente deve comunque risolvere.
Non si limiti a scorrere
Far comparire l’errore nell’area visibile aiuta chi usa il mouse, ma gli utenti da tastiera e quelli che usano uno screen reader hanno bisogno che venga spostato il focus, non solo i pixel.
Un riquadro di riepilogo è utile
In presenza di molti errori, porti prima il focus su un riepilogo degli errori in alto. Elenchi ogni problema come un collegamento che porta al relativo campo.
<div tabindex="-1" id="errors">
3 errors found
</div>Rendere il riepilogo focalizzabile
Per impostazione predefinita, un’intestazione o un div non possono ricevere il focus. Aggiunga tabindex="-1" così lo script può spostare il focus su di esso a livello programmatico.
Collegare gli errori ai campi
Nel riepilogo, ogni elemento è un collegamento all’id del campo. Attivandolo, il focus passa direttamente all’input non valido.
<a href="#email">Email is required</a>Eviti di sottrarre il focus in anticipo
Sposti il focus solo in risposta all’azione di submit dell’utente, mai a ogni pressione di un tasto. Strappare il focus mentre l’utente sta digitando è destabilizzante e sgradito.
Confermare il recupero
Dopo che l’utente ha corretto tutto e invia nuovamente il modulo, sposti il focus su un messaggio di successo, così sente che finalmente l’operazione è riuscita.
Controllo rapido
Dove deve andare il focus quando l’invio di un modulo non va a buon fine?
Riepilogo
In caso di errore, sposti il focus sul primo campo non valido o su un riepilogo degli errori focalizzabile; dopo l’invio corretto, lo sposti su un messaggio di successo. ✅
Domande Frequenti
La lezione «Spostare il focus sul primo errore» è gratuita?
Sì — il testo completo di «Spostare il focus sul primo errore» è 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 «Spostare il focus sul primo errore»?
Portare l'utente direttamente su ciò che deve correggere 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 «Spostare il focus sul primo errore»?
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
- Collegare gli errori ai campi con aria-describedby
- Indicare lo stato non valido con aria-invalid
- Spostare il focus sul primo errore
- Inline, al blur o all'invio: il momento è importante