Interações com o teclado e links para ignorar
Dê suporte a quem usa principalmente o teclado: botões/links nativos, ordem lógica de tabulação, padrões com teclas de seta e um link visível para ignorar até o conteúdo principal.
Interações com o teclado e links para ignorar é uma aula grátis de React Academy no CoddyKit. Esta é a aula 2 de 3. 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 React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 3 aulas no total.
Por que oferecer suporte ao teclado
Objetivo: Torne o aplicativo totalmente utilizável com um teclado.
- Prefira botão/link nativos
- Ordem lógica de Tab
- Forneça um link de salto
Prefira controles nativos
- Use botão para cliques (Espaço/Enter funcionam por padrão)
- Use a href para navegação (Enter)
- Evite divs clicáveis; se necessário, adicione papel, índice de tabulação e manipuladores de teclado
Demonstração: um botão real é melhor que uma div
Botões nativos fornecem foco, teclas do teclado e semântica automaticamente.
<div id="root"></div>
Demonstração: teclas de seta (índice de tabulação móvel)
Forneça movimentação com as teclas de seta dentro de controles compostos (uma lista simples com índice de tabulação móvel).
<div id="root"></div>
Demonstração: saltar para o conteúdo
Adicione um link de salto, que receba o foco primeiro, para ir diretamente ao conteúdo principal.
<div id="root"></div>
Lista de verificação e dicas
- Coloque o link de salto primeiro no DOM; torne-o visível quando receber foco
- Garanta que a região principal possa receber foco (tabIndex=-1)
- Mantenha a ordem de Tab lógica; evite índices de tabulação maiores que 0
Verificação da finalidade do link de salto
Recapitulação
Recapitulação: Prefira controles nativos, ofereça suporte às teclas de seta em controles compostos e adicione um link de salto visível ao receber foco para alcançar rapidamente o conteúdo principal.
Perguntas Frequentes
A aula “Interações com o teclado e links para ignorar” é grátis?
Sim — o texto completo de “Interações com o teclado e links para ignorar” é 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 React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 3 aulas no total.
O que vou aprender em “Interações com o teclado e links para ignorar”?
Dê suporte a quem usa principalmente o teclado: botões/links nativos, ordem lógica de tabulação, padrões com teclas de seta e um link visível para ignorar até o conteúdo principal. Você pratica React 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 React Academy?
Nenhuma experiência prévia é necessária. React 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 2 de 3.
Quanto tempo leva a aula “Interações com o teclado e links para ignorar”?
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 React Academy?
Sim. Cada aula de React 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
- Semântica, rótulos, funções e foco
- Interações com o teclado e links para ignorar
- Noções básicas de testes de acessibilidade