Uma pessoa visita cinco matérias de um site usando o teclado. Em cada página, ela percorre o logotipo, os links do menu, a busca e a faixa de avisos antes de chegar ao texto. Um link para pular ao conteúdo oferece um caminho mais curto. O teste decisivo vem depois de acionar o atalho. A próxima ação no teclado precisa continuar a partir da região que a pessoa escolheu alcançar.

Identifique o trecho que se repete

Imagine um site de serviços com cabeçalho que reúne navegação, busca e acesso a uma área restrita. Na página de um serviço, o conteúdo principal começa no título e continua com a descrição da oferta e as informações para contratar. Em um artigo, começa no título da matéria ou na região que o contém. Identifique essa região em cada modelo do site. O mesmo texto de atalho pode ser usado em vários modelos quando o destino cumpre a mesma função em todos.

A técnica G1 da WAI descreve um link no início da página para alcançar diretamente a área principal, como forma de lidar com blocos repetidos. Explore a ordem no documento. Elementos que aparecem no topo da tela podem ter outra posição na sequência do teclado se o layout muda sua ordem visual. O atalho precisa estar antes do conjunto que oferece pular. Teste desde a entrada na página e compare a primeira tabulação com a sequência planejada. Se um aviso global vem antes, examine se ele também faz parte do bloco que a pessoa precisa atravessar em todas as visitas.

Use um rótulo que explique o destino

“Ir para o conteúdo principal” funciona bem quando a página tem uma região principal reconhecível. A pessoa sabe o que vai encontrar e pode decidir usar o caminho normal se a intenção for acessar o menu. Evite rótulos genéricos como “Pular” quando o destino fica implícito. Em um site multilíngue, traduza o rótulo e revise a largura do componente. Um texto mais longo pode quebrar linha e exigir outra altura para permanecer legível quando o foco aparece.

O componente de skip link do GOV.UK Design System mostra um exemplo de atalho associado a um destino na página. Use a referência para revisar a estrutura e adaptar o texto à linguagem do site. Quando existe uma razão para oferecer mais de um atalho, nomeie destinos distintos. Em um sistema interno, pode fazer sentido oferecer acesso a resultados e a filtros. Num site de serviços, comece pelo conteúdo principal e teste se os outros destinos resolveriam tarefas recorrentes. Cada atalho adicional também entra na sequência de navegação.

Faça a chegada funcionar no documento e na tela

Associe o link a um identificador único na região de destino. Uma implementação comum aponta para o identificador do elemento principal. Depois de ativar, confira em navegadores do projeto se a sequência do teclado passa a seguir a partir dali. Observe o foco e a próxima tabulação. Um destino pode aparecer no alto da janela por causa da rolagem e ainda deixar a pessoa navegando pelo cabeçalho. Se o teste mostrar essa diferença, revise o comportamento de foco na implementação.

Use o título visível para orientar a chegada. Em uma página de serviço, o título e o início da oferta devem aparecer sem ficarem atrás de um cabeçalho fixo. Considere o espaço ocupado por barras que mudam de altura quando a tela é estreita. Faça um teste com ampliação e veja o que aparece logo após a ativação. O artigo sobre zoom e refluxo em sites ajuda a avaliar como controles e leitura se comportam quando o espaço diminui. O destino precisa permanecer reconhecível nessas condições, mesmo que o título use duas linhas.

Desenhe o estado de foco para vários fundos

Se o link fica visualmente recolhido até receber foco, teste o estado em que precisa aparecer. Ele pode surgir sobre o cabeçalho, antes da marca ou em uma faixa reservada. Em qualquer caso, precisa ter contraste, espaço e contorno suficientes para ser identificado. Verifique se ele está acima das camadas do cabeçalho quando há menus, faixas ou elementos fixos. Um componente pode existir na ordem de foco e continuar invisível por estar atrás de outra camada.

O guia sobre foco visível em interfaces complementa a revisão. Observe a primeira tabulação em fundo claro e escuro. Se o site tem tema alternativo, examine também a combinação usada nesse tema. Pressione Tab de novo sem acionar o link e confirme que a navegação convencional continua. Faça o mesmo com Shift mais Tab. O atalho deve integrar a sequência. Essa verificação mostra se a pessoa consegue experimentar o recurso e voltar aos controles anteriores ou seguintes sem perder orientação.

Trate navegação dinâmica e avisos de entrada como casos próprios

Em aplicações que trocam o conteúdo sem recarregar a página inteira, o cabeçalho pode continuar montado enquanto a região principal muda. Use o mesmo destino estável ou atualize a referência quando o novo modelo entra. Teste o atalho em uma navegação interna, em um acesso por URL direta e depois de usar o botão Voltar do navegador. Se o histórico guarda fragmentos, confira a sequência real e avalie se voltar leva ao lugar esperado. O fluxo deve continuar inteligível depois da troca de rota.

Quando a página abre com uma camada que exige decisão, como uma confirmação no contexto de uma tarefa, teste separadamente o comportamento enquanto ela está ativa e após fechar. O atalho precisa fazer parte da navegação quando a página volta a estar disponível. Uma faixa informativa que permanece no alto pode disputar espaço visual com o atalho. Abra a página em um ambiente em que a faixa apareça pela primeira vez. Verifique se o link recebe foco em um momento em que a pessoa consegue vê-lo e chegar ao destino.

Verifique vários modelos com o mesmo roteiro

Comece na página inicial, abra um serviço e acesse uma matéria. Em cada página, faça a primeira tabulação, acione o atalho e continue com Tab. Registre a ordem encontrada e o nome do primeiro elemento que recebe foco após a chegada. Depois faça o percurso sem acionar o atalho. A pessoa que quer usar o menu precisa conseguir alcançá-lo. Repita com leitor de tela, ouvindo o rótulo e a identificação da região de destino. Teste também quando o conteúdo principal começa com texto e quando começa com um controle.

Inclua uma página em que o cabeçalho tem mais itens que o habitual. É nesse cenário que o benefício de evitar o bloco repetido fica mais fácil de perceber. Inclua também uma página cujo conteúdo termina sem links ou botões. Após chegar a ela, verifique como a próxima tabulação prossegue e como a pessoa pode retornar à leitura do texto. O teste deve distinguir navegação por Tab de leitura estrutural com tecnologia assistiva. Uma região com título claro pode oferecer orientação mesmo quando os primeiros parágrafos não têm elementos interativos.

Transforme o comportamento em critério de aceite

Registre o texto do link, a posição na sequência, o identificador de destino e o resultado esperado ao acionar. Acrescente uma captura do foco em tela estreita e um teste de regressão para páginas que têm cabeçalho fixo. Se o tema for compartilhado, determine qual parte do código fornece o link e qual parte define o destino. Um novo modelo precisa fornecer a região esperada, e a equipe deve conseguir verificar isso antes de publicar uma página criada com ele.

Por fim, compare o esforço necessário para chegar ao primeiro título com e sem o atalho. A redução de passos é observável, mas só conta quando o destino está visível e o teclado consegue continuar dali. Se a página muda depois do carregamento, repita o teste após a mudança e confirme que o destino permanece disponível. O atalho funciona quando a pessoa pode reconhecer a opção no início e usar o restante da página na ordem esperada.

Revise a chegada a partir de links com fragmentos

Uma pessoa pode abrir a página por uma referência que leva diretamente a uma seção intermediária. Nesse caso, a posição inicial pode corresponder à seção solicitada. Teste o que acontece ao navegar para trás no teclado e ao voltar à página de origem. No modelo de artigo, verifique também o índice interno. Os links do índice e o atalho inicial podem levar a partes diferentes do mesmo documento. Seus rótulos e destinos precisam continuar distintos. O roteiro deve indicar de onde cada percurso começa e qual título a pessoa deve encontrar ao chegar.