Passo 1 de 6
Colocar o atalho antes da navegação
Posicione um link de salto visível antes dos blocos repetidos, oferecendo um caminho direto ao conteúdo principal.
Trilha de aprendizado · Nível 3 · Tutorial 4
Adicionar um atalho visível que permita contornar a navegação repetida e alcançar o conteúdo principal usando apenas recursos do HTML.
Colocar o atalho antes da navegação
Posicione um link de salto visível antes dos blocos repetidos, oferecendo um caminho direto ao conteúdo principal. 2 min
Definir o main como destino
Conecte o atalho ao início do main existente, mantendo a correspondência entre o fragmento do href e o id do destino. 2 min
Separar rolagem, foco e navegação
Distinguir o que aparece na tela, o elemento que recebe ações do teclado e a referência para continuar com Tab. 2 min
Permitir foco sem criar outra parada de Tab
Use tabindex="-1" no main para permitir foco sem acrescentar uma parada à sequência normal de Tab. 2 min
Experimentar o salto apenas pelo teclado
Teste o percurso com e sem o atalho e observe se a navegação continua dentro do conteúdo principal. 2 min
Aplicar e revisar o atalho completo
Adapte uma página e confira, pelo código e pelo teclado, se o atalho permite contornar a navegação repetida. 3 min
Passo 1 de 6
Posicione um link de salto visível antes dos blocos repetidos, oferecendo um caminho direto ao conteúdo principal.
Imagine um site cujo menu aparece em todas as páginas. Quem navega pelo teclado não deveria precisar percorrer os mesmos links sempre que quiser chegar ao conteúdo principal.
O link de salto oferece esse caminho direto. Ele permite contornar a navegação repetida, sem remover o menu de quem deseja usá-lo.
Coloque o atalho logo após a abertura de <body>, antes do cabeçalho, dos blocos repetidos de navegação e dos demais links. Assim, ele será a primeira opção interativa da página.
Exemplo
Se o nome do site no header é um link para a página inicial, o atalho deve vir antes dele — não apenas antes do nav.
Uma página tem um cabeçalho com menu, seguido pelo conteúdo principal. Organize os blocos dentro do body para oferecer o atalho antes da navegação repetida, preservando o cabeçalho e o menu.
Neste tutorial, o atalho ficará permanentemente visível, com a apresentação padrão de um link no navegador. Não precisamos de CSS nem de JavaScript para oferecer esse recurso.
Além de aparecer primeiro, seu texto deve anunciar o caminho direto ao conteúdo principal.
Exemplo
“Pular para o conteúdo principal” comunica a ação e o destino. “Clique aqui” não informa o que será alcançado.
A posição e o texto estão definidos. No próximo passo, você conectará o link ao destino.
Passo 2 de 6
Conecte o atalho ao início do main existente, mantendo a correspondência entre o fragmento do href e o id do destino.
Aplique a navegação por fragmentos que você já conhece: o href="#conteudo" do atalho corresponde ao id="conteudo" no main. Assim, o destino é o início do conteúdo principal, não a navegação nem um trecho intermediário.
<body>
<a href="#conteudo">Pular para o conteúdo principal</a>
<nav>
<a href="inicio.html">Início</a>
<a href="contato.html">Contato</a>
</nav>
<main id="conteudo">
<h1>Biblioteca</h1>
<p>Conheça nossos serviços.</p>
</main>
</body><nav id="menu">
<a href="inicio.html">Início</a>
</nav>
<main id="leitura">
<h1>Biblioteca</h1>
<p>Serviços e informações para visitantes.</p>
<h2 id="horarios">Horários</h2>
<p>De segunda a sexta, das 9h às 18h.</p>
</main>O atalho será colocado antes dessa navegação. Qual atributo deve ser usado nele para alcançar o início do conteúdo principal?
Se o main já tem um id, use esse valor no href do atalho. Se ainda não tem, adicione o identificador à tag de abertura do próprio main.
Dica
Não adicione um segundo main nem um elemento vazio antes dele só para receber o salto. O destino é a região que já contém o conteúdo principal.
<body>
<a href="#conteudo-principal">Pular para o conteúdo principal</a>
<nav>
<a href="inicio.html">Início</a>
</nav>
<main>
<h1>Catálogo da biblioteca</h1>
<p>Confira os livros disponíveis.</p>
</main>
</body>Mantenha o link como está e complete a nova tag de abertura do main existente: <main id="___">.
Passo 3 de 6
Distinguir o que aparece na tela, o elemento que recebe ações do teclado e a referência para continuar com Tab.
Com o link já conectado ao main, separe três conceitos:
Dica
Tab avança o foco entre elementos interativos, como links. Enter ativa o link que está com foco. O navegador costuma indicar esse foco com um contorno; ele não é a mesma coisa que o ponteiro do mouse.
Associe cada observação ao aspecto que ela permite avaliar.
Toque em um item e depois no par correspondente.
A navegação por fragmentos pode reposicionar a página e mudar a referência para o próximo Tab. Já o comportamento do foco precisa ser observado no navegador: a rolagem, sozinha, não comprova que o destino recebeu foco.
Exemplo
Imagine um main com um título, um parágrafo e o link “Ler artigo”. Se o salto estabelecer ali o ponto de navegação, o próximo Tab poderá alcançar “Ler artigo” diretamente, sem parar no título ou no parágrafo. Isso não prova que o main estava focado antes.
Dica
Títulos e parágrafos comuns não são paradas de Tab. O main também não entra na sequência normal de Tab apenas por representar o conteúdo principal.
Após ativar o atalho, o início do main aparece na tela. Porém, o próximo Tab leva o foco a um link da navegação que deveria ser contornada. O que é possível concluir?
Passo 4 de 6
Use tabindex="-1" no main para permitir foco sem acrescentar uma parada à sequência normal de Tab.
Acrescente tabindex="-1" à tag de abertura do main usado como destino do salto. Isso permite que ele receba foco, sem acrescentá-lo à sequência normal de Tab.
<body>
<a href="#conteudo">Pular para o conteúdo principal</a>
<nav>
<a href="inicio.html">Início</a>
<a href="sobre.html">Sobre</a>
</nav>
<main id="conteudo" tabindex="-1">
<h1>Agenda cultural</h1>
<a href="programacao.html">Ver programação</a>
</main>
</body>Complete a tag do destino com o atributo e o valor que permitem foco sem incluir o main na sequência normal de Tab:
<main id="conteudo" ____>
Adicionar o atributo não coloca foco no main por conta própria. Ao ativar o atalho, o navegador executa a navegação nativa pelo fragmento, agora com um destino preparado para receber foco.
Os links dentro do main, como “Ver programação”, continuam no percurso normal de Tab. O atributo no main não os retira desse percurso.
Dica
Não trate tabindex="-1" como garantia de comportamento idêntico em todos os navegadores. Verifique o foco e a continuidade da navegação por teclado: a rolagem, sozinha, não comprova que o salto funcionou como esperado.
No exemplo, colocar tabindex="-1" no main faz com que o link “Ver programação” também deixe de ser alcançado pela sequência normal de Tab.
Passo 5 de 6
Teste o percurso com e sem o atalho e observe se a navegação continua dentro do conteúdo principal.
Salve o exemplo como teste-salto.html e abra o arquivo em uma nova aba. Comece no topo, com o endereço sem nenhum fragmento, como #conteudo.
O menu representa a navegação repetida de um site. Durante os percursos, deixe o mouse de lado.
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Teste do link de salto</title>
</head>
<body>
<a href="#conteudo">Pular para o conteúdo principal</a>
<header id="inicio">
<p>Biblioteca de estudos</p>
<nav>
<ul>
<li><a href="#inicio">Início</a></li>
<li><a href="#guias">Guias</a></li>
<li><a href="#contato">Contato</a></li>
</ul>
</nav>
</header>
<main id="conteudo" tabindex="-1">
<h1 id="guias">Guias de estudo</h1>
<p><a href="#orientacoes">Ler as orientações</a></p>
<h2 id="orientacoes">Orientações de estudo</h2>
<p>Leia um guia por vez e pratique os exemplos.</p>
</main>
<footer id="contato">
<p>Contato: procure a equipe da biblioteca.</p>
</footer>
</body>
</html>Dica
Se a página inteira couber na tela, talvez não haja deslocamento perceptível. A indicação visual de foco também pode variar entre navegadores. O próximo Tab verifica a continuidade do percurso; a rolagem, sozinha, não comprova foco no main.
Abra novamente o arquivo em uma nova aba, sem fragmento no endereço e no topo da página. Evite apenas recarregar: o navegador pode preservar o estado anterior.
Desta vez, use somente Tab, sem pressionar Enter. Observe cada parada até chegar a Ler as orientações.
Exemplo
Pular para o conteúdo principal → Início → Guias → Contato → Ler as orientações.
Confira a passagem direta de Contato para Ler as orientações: o main não deve aparecer como uma parada extra de Tab.
Relate seu teste, incluindo:
Registre o resultado real, mesmo que seja diferente do esperado. Se não conseguiu identificar o foco, diga isso.
Escreva pelo menos 60 caracteres (0/60).
Passo 6 de 6
Adapte uma página e confira, pelo código e pelo teclado, se o atalho permite contornar a navegação repetida.
Adapte esta página usando somente HTML. Adicione um atalho visível como primeiro elemento interativo, com texto claro. Conecte-o ao main existente e prepare esse destino para receber foco sem criar outra parada na sequência normal de Tab.
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Clube de leitura — Biblioteca do bairro</title>
</head>
<body>
<header>
<p>Biblioteca do bairro</p>
<nav>
<ul>
<li><a href="index.html">Início</a></li>
<li><a href="acervo.html">Acervo</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
</nav>
</header>
<main>
<h1>Clube de leitura</h1>
<p>Participe das nossas conversas sobre livros.</p>
<p><a href="#encontros">Consultar os próximos encontros</a></p>
<section id="encontros">
<h2>Próximos encontros</h2>
<p>Sábado, às 10h, na biblioteca.</p>
</section>
</main>
</body>
</html>Edite e salve o arquivo HTML. Cole abaixo o <body> completo da sua versão, incluindo o atalho e o destino configurado. Preserve a navegação e o conteúdo do main.
main não virou uma parada extra.Como a página é curta, pode não haver rolagem perceptível. Isso não dispensa a verificação pelo teclado.
Informe o navegador usado e descreva: o destino visual após Enter, o link que recebeu foco no Tab seguinte e o percurso sem ativar o atalho. Por que observar apenas a rolagem não seria suficiente? Registre qualquer diferença em relação ao esperado.
Resumo
Parabéns! Você concluiu: Criar um link para pular ao conteúdo principal
Você concluiu “Criar um link para pular ao conteúdo principal”. Leve este critério para suas páginas: o salto deve contornar a navegação repetida e permitir continuar pelo teclado a partir do conteúdo.
Você concluiu este nível!
Agora você vai iniciar: Imagens, áudio e vídeo
Inserir imagens com dimensões e texto alternativoInserir imagens com endereço válido, declarar suas dimensões e definir o texto alternativo conforme a função da imagem no conteúdo.Milhares de cursos online em vídeo, ebooks e áudiobooks.
Para testar seus conhecimentos no decorrer dos cursos online
Gerado diretamente na galeria de fotos do seu celular e enviado ao seu e-mail
Baixe nosso aplicativo pelo QR Code ou pelos links abaixo:.
Leve o conhecimento no seu bolso.
Baixe o aplicativo Cursa.
São centenas de Cursos gratuitos a disposição, com Certificado de conclusão gratuito que é salvo em sua galeria de imagens do celular.
Baixe o app para ter acesso ao Certificado de conclusão de Curso Gratuitamente.
+ de 10 milhões
de alunos
Certificado grátis e
válido em todo o Brasil
60 mil exercícios
gratuitos
4,8/5 classificação
nas lojas de apps
Cursos gratuitos em
vídeo, ebooks e audiobooks