Movendo o foco para o primeiro erro
Direcione as pessoas diretamente ao que elas precisam corrigir.
Movendo o foco para o primeiro erro é uma aula grátis de Web Accessibility Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Web Accessibility Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Web Accessibility Academy inclui 4 aulas no total.
Partes desta aula ainda não foram traduzidas e aparecem em inglês.
Lost After Submit
A user submits, the page shows errors at the top, but focus stays on the button. They have no idea anything failed. 😕
Send Focus to the Problem
On a failed submit, move focus to the first invalid field. The user lands exactly where the fix begins, no hunting required.
Use focus in JS
Find the first failing control and call focus() on it. Now both keyboard and screen reader users start at the right place.
const first = form.querySelector("[aria-invalid='true']");
if (first) first.focus();Read Name, Type, Error
When focus lands there, the screen reader announces the field's name, that it is invalid, and its described error all at once.
First, Not Random
Always target the first error in document order. Jumping to a later field skips problems the user must still address.
Do Not Just Scroll
Scrolling the error into view helps the mouse, but keyboard and screen reader users need real focus moved, not just pixels shifted.
A Summary Box Helps
For many errors, focus an error summary at the top first. List each problem as a link that jumps to its field.
<div tabindex="-1" id="errors">
3 errors found
</div>Make the Summary Focusable
A heading or div is not focusable by default. Add tabindex="-1" so your script can move focus to it programmatically.
Link Errors to Fields
Inside the summary, each item is a link to the field's id. Activating it sends focus straight to the broken input.
<a href="#email">Email is required</a>Avoid Stealing Focus Early
Only move focus in response to the user's submit, never on every keystroke. Yanking focus mid-typing is jarring and unwelcome.
Confirm the Recovery
After the user fixes everything and resubmits, move focus to a success message so they hear that it finally worked.
Quick Check
Where should focus go when a form submit fails?
Recap
On failure, move focus to the first invalid field or a focusable error summary, and to a success message once it passes. ✅
Perguntas Frequentes
A aula “Movendo o foco para o primeiro erro” é grátis?
Sim — o texto completo de “Movendo o foco para o primeiro erro” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Web Accessibility Academy, atualize para CoddyKit PRO. O curso de Web Accessibility Academy inclui 4 aulas no total.
O que vou aprender em “Movendo o foco para o primeiro erro”?
Direcione as pessoas diretamente ao que elas precisam corrigir. Você pratica Web Accessibility Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Web Accessibility Academy?
Nenhuma experiência prévia é necessária. Web Accessibility Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.
Quanto tempo leva a aula “Movendo o foco para o primeiro erro”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Web Accessibility Academy?
Sim. Cada aula de Web Accessibility Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Associando erros a campos com aria-describedby
- Marcando o estado inválido com aria-invalid
- Movendo o foco para o primeiro erro
- Em linha, ao perder o foco ou ao enviar: o momento importa