Criando um link de salto que realmente funciona
Associe a âncora a um destino que possa receber foco.
Criando um link de salto que realmente funciona é uma aula grátis de Web Accessibility Academy no CoddyKit. Esta é a aula 2 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.
As duas partes de um link de salto
Um link de salto funcional tem duas partes: uma âncora que aponta para algum lugar e um destino onde ela realmente pode chegar. Ambos são necessários.
A parte da âncora
A âncora é um link comum cujo href é um fragmento, como um jogo da velha seguido de um id. Clicar nele informa ao navegador para onde ir.
<a href="#main">Skip to main content</a>A parte do destino
O destino é o elemento que você quer alcançar. Dê a ele um id correspondente para que o fragmento do href tenha para onde apontar.
<main id="main"> ... </main>main é o destino natural
Aponte o link de salto para a região main. Ela é a única região que contém o conteúdo exclusivo da página, exatamente onde as pessoas querem chegar.
Clicar não é suficiente
Um problema antigo: o link rola a página, mas o foco permanece no link. O próximo Tab envia a pessoa diretamente de volta à navegação.
Torne o destino focável
A solução é permitir que o foco realmente se mova para lá. Adicione tabindex igual a menos um para que o destino possa receber o foco do link de salto.
<main id="main" tabindex="-1"> ... </main>Por que menos um, e não zero
Menos um significa acessível por script e como destino de link, mas fora da ordem de Tab. O elemento não se tornará uma parada de Tab inesperada para as outras pessoas.
Os navegadores modernos ajudam
Hoje, a maioria dos navegadores move o foco automaticamente para o destino do fragmento. Mas adicionar tabindex menos um garante que isso funcione em qualquer lugar, então mantenha-o.
Teste com os olhos e os ouvidos
Recarregue a página, pressione Tab uma vez e depois Enter. O indicador de foco deve saltar para o conteúdo, e o próximo Tab deve continuar dentro dele. ✅
Mantenha o texto claro
Use um rótulo simples. Ir para o conteúdo principal informa exatamente o que acontecerá, muito melhor do que um Ir para ou um ícone vago.
A ordem na página
Coloque a âncora como o primeiro filho do body, antes do cabeçalho, para que Tab a alcance antes de qualquer outra coisa na página.
Verificação rápida
O que permite que o foco realmente chegue à região main?
Recapitulação
Conecte uma âncora a um id correspondente em main, adicione tabindex menos um e faça um teste usando Tab. Esse é um link de salto que realmente funciona. 🎯
Perguntas Frequentes
A aula “Criando um link de salto que realmente funciona” é grátis?
Sim — o texto completo de “Criando um link de salto que realmente funciona” é 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 “Criando um link de salto que realmente funciona”?
Associe a âncora a um destino que possa receber foco. 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 2 de 4.
Quanto tempo leva a aula “Criando um link de salto que realmente funciona”?
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
- Por que existe o salto para o conteúdo principal
- Criando um link de salto que realmente funciona
- Oculto visualmente até receber foco
- Vários links de salto para páginas grandes