Navegação pelo teclado e gerenciamento de foco
Garanta que todos os elementos interativos possam ser alcançados com Tab, gerencie o foco programaticamente em diálogos e rotas e crie indicadores de foco visíveis.
Navegação pelo teclado e gerenciamento de foco é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 4 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 Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
Por que a navegação pelo teclado é importante
Muitos usuários não podem usar um mouse: pessoas com deficiências motoras, usuários de leitores de tela e usuários avançados que preferem o teclado. Se o seu aplicativo não puder ser navegado pelo teclado, ele não funcionará para essas pessoas.
Tab e Shift+Tab
Tab move o focus para o próximo elemento interativo. Shift+Tab move-o para o anterior. Por padrão, a ordem segue a ordem do DOM; não lute contra isso: deixe o DOM definir a ordem de tabulação.
O que recebe focus por padrão
Elementos interativos nativos podem receber focus: a[href], button, input, select, textarea, summary. Elementos personalizados precisam de tabindex.
Valores de tabindex
tabindex="0": incluído na ordem de tabulação na posição do DOM. tabindex="-1": pode receber focus somente via JS (focus por script, não por Tab). tabindex=">0": um antipadrão que cria uma ordem de focus confusa; nunca o use.
<!-- Custom button (still: use real <button>!): -->
<div role="button" tabindex="0" onkeydown="...">Custom</div>
<!-- Programmatically focusable, skipped by Tab: -->
<div tabindex="-1" id="error-summary"></div>Indicador de focus visível
Nunca remova os contornos de focus sem oferecer uma alternativa. A WCAG exige um indicador visível em todo elemento que pode receber focus.
/* BAD: hides focus for everyone */
*:focus { outline: none; }
/* GOOD: only show focus from keyboard (not mouse click) */
:focus-visible {
outline: 2px solid #2563eb;
outline-offset: 2px;
}:focus-visible
A pseudoclasse :focus-visible é ativada somente quando o focus veio do teclado, não de um clique do mouse. Ela permite manter estilos limpos para o mouse e, ao mesmo tempo, exibir o focus do teclado.
Link para ignorar o conteúdo
O primeiro elemento que pode receber focus deve ser um link para ignorar o conteúdo, para que usuários do teclado possam passar diretamente da navegação do cabeçalho para o conteúdo principal.
<a href="#main" class="skip-link">Skip to main content</a>
...
<main id="main" tabindex="-1">...</main>
/* CSS */
.skip-link {
position: absolute; left: -10000px;
}
.skip-link:focus {
left: 1rem; top: 1rem;
background: white; padding: 0.5rem 1rem;
}Prender o focus em modais
Quando um modal é aberto, o focus deve ficar preso dentro dele: ao pressionar Tab no último elemento, o focus volta para o primeiro; ao pressionar Shift+Tab no primeiro, ele volta para o último. Pressionar Escape fecha o modal.
// On modal open:
modal.querySelector('h2').focus(); // move focus into modal
lastFocused = document.activeElement;
// On Tab in modal: detect leaving and wrap to first focusable.
// On Escape: close modal and restore focus:
lastFocused.focus();Use o elemento dialog
O <dialog> nativo do HTML gerencia automaticamente a prisão do focus, o fechamento com Escape e a camada de fundo do modal.
<dialog id="signup">
<h2>Sign up</h2>
<form method="dialog">
<input name="email" required>
<button>Submit</button>
<button value="cancel">Cancel</button>
</form>
</dialog>
<script>
document.getElementById('signup').showModal(); // opens with focus trap
</script>Gerenciamento de focus após mudança de rota
SPAs não recarregam a página, então usuários de leitores de tela não recebem nenhum sinal de que a navegação aconteceu. Mova o focus para o h1 ou main da nova página quando a rota mudar.
// On route change:
document.getElementById('main')?.focus();
// or focus the new h1:
newPage.querySelector('h1')?.setAttribute('tabindex', '-1');
newPage.querySelector('h1')?.focus();A ordem do focus deve corresponder à ordem visual
Certifique-se de que a ordem do DOM corresponda ao fluxo visual. Se o CSS reorganizar os elementos (ordem em flex, posicionamento em grid, position absolute), a ordem de tabulação não corresponderá à ordem visual, o que confundirá todos.
Teste guardando o mouse
O teste de acessibilidade mais útil: desconecte o mouse e tente usar todo o aplicativo com Tab, Shift+Tab, Enter, Espaço e as teclas de seta. Se você ficar preso, seus usuários também ficarão.
Verificação rápida
Qual pseudoclasse CSS permite estilizar o contorno de focus somente quando o focus veio do teclado, e não de um clique do mouse?
Recapitulação: navegação pelo teclado
Elementos interativos nativos podem receber focus por padrão. Use tabindex=0 somente em componentes personalizados; nunca use tabindex>0. Sempre mostre o focus — use :focus-visible. Adicione um link para ignorar o conteúdo. Prenda o focus em modais e restaure-o ao fechar. Use o elemento nativo <dialog> quando possível. Mova o focus para h1/main quando a rota mudar. Teste guardando o mouse.
Aprenda HTML com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 41
- Aulas
- 163
Perguntas Frequentes
A aula “Navegação pelo teclado e gerenciamento de foco” é grátis?
Sim — o texto completo de “Navegação pelo teclado e gerenciamento de foco” é 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 Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.
O que vou aprender em “Navegação pelo teclado e gerenciamento de foco”?
Garanta que todos os elementos interativos possam ser alcançados com Tab, gerencie o foco programaticamente em diálogos e rotas e crie indicadores de foco visíveis. Você pratica Frontend 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 Frontend Academy?
Nenhuma experiência prévia é necessária. Frontend 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 4 de 4.
Quanto tempo leva a aula “Navegação pelo teclado e gerenciamento de foco”?
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 Frontend Academy?
Sim. Cada aula de Frontend 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
- Níveis WCAG A AA AAA
- HTML semântico como base
- Papéis e atributos ARIA
- Navegação pelo teclado e gerenciamento de foco