Links para contornar blocos de conteúdo em conjunto de páginas
O que a norma pede
Há um link ou outro mecanismo para pular os blocos que se repetem em várias páginas, como o cabeçalho e o menu, e ir direto ao conteúdo.
- 2.4.1 (A)
Parecido na NBR 17060
A NBR 17060 trata de aplicativos. Se o seu serviço também tem app, veja o que a Bússola da NBR 17060 diz sobre o mesmo assunto:
Visões por perfil
Escolha um perfil para ver o que o requisito pede de quem ocupa esse papel:
Desenhe o link “Pular para o conteúdo” como primeiro item da página e defina como ele aparece ao receber foco. Quem navega pelo teclado passaria, sem ele, pelo cabeçalho e pelo menu inteiros em cada página.
Cabeçalho do portal
O cabeçalho tem 25 links antes do conteúdo.
Errado: Sem atalho
No protótipo
Nenhum elemento antes do logo.
25 Tabs em cada página até chegar ao conteúdo.
Certo: Atalho no topo
No protótipo
“Pular para o conteúdo” visível ao receber foco, antes do logo.
Um Tab e um Enter levam ao conteúdo.
Crie como primeiro elemento focável um link âncora para o main, que fique visível ao receber foco, sem display: none. Ao ser acionado, o foco deve ir para o conteúdo.
Link de pular
Implementação no leiaute base.
Errado: Link escondido para sempre
<a href="#conteudo" style="display:none">Pular para o conteúdo</a>O link nunca recebe foco.
Certo: Visível no foco
<a href="#conteudo" class="pular">Pular para o conteúdo</a> <main id="conteudo" tabindex="-1">…</main> /* .pular:not(:focus) { position: absolute; left: -9999px; } */Aparece no primeiro Tab e leva ao conteúdo.
Inclua o link de pular no leiaute base do site e no teste de aceite de novos leiautes. É uma mudança pequena que economiza esforço em todas as páginas.
Novo cabeçalho
O cabeçalho foi redesenhado.
Errado: Link removido no redesenho
Entrega
O link “Pular” sumiu por não aparecer no protótipo.
A economia de esforço some em todo o site.
Certo: Link preservado
Entrega
Critério de aceite: “Primeiro Tab mostra ‘Pular para o conteúdo’.”
O atalho continua funcionando.
Carregue a página e aperte Tab uma vez: o primeiro elemento deve ser o link de pular, visível. Acione-o e confira se o próximo Tab já está no conteúdo, repetindo em páginas de modelos diferentes.
Primeiro Tab
Teste na página de um serviço.
Errado: Sem atalho
Tab → logo
Tab → Início
… 23 Tabs depois → título do serviço
A pessoa percorre o menu inteiro sempre.
Certo: Com atalho
Tab → “Pular para o conteúdo”
Enter → foco no conteúdo principal
O conteúdo fica a dois toques.
Use um texto curto que diga o que o atalho faz, como “Pular para o conteúdo”, igual em todas as páginas. Se houver outros atalhos, nomeie o destino, como “Ir para a busca”.
Texto do atalho
O primeiro link da página.
Errado: Vago
Texto do link
“Acessibilidade”
Não diz o que acontece.
Certo: Direto
Texto do link
“Pular para o conteúdo”
A pessoa sabe o que o link faz.