Vários links de salto para páginas grandes

Em uma página pequena, um link de salto basta. Mas layouts complexos têm várias regiões repetidas, e as pessoas podem querer chegar a mais lugares do que apenas main.

Alguém pode querer o campo de pesquisa, a navegação principal ou o rodapé, e não necessariamente o artigo. Ofereça os destinos que essas pessoas realmente procuram.

Um conjunto comum é Ir para o conteúdo, Ir para a navegação, Ir para a pesquisa. Mantenha-o curto para que a própria lista não se torne um incômodo.

Envolva os links para ignorar conteúdo em uma pequena região nav, para que sejam lidos como um conjunto coerente de atalhos no topo da página.

Dê ao contêiner um aria-label como Links de salto. Sem um nome, duas navegações na mesma página soam idênticas para quem usa um leitor de tela.

Cada atalho ainda precisa de um id real para alcançar. Ir para a pesquisa aponta para a região de pesquisa, ir para a navegação aponta para o menu, e assim por diante.

Assim como antes, adicione tabindex menos um a cada destino para que o foco se mova até ele de forma confiável quando o link correspondente for ativado.

Resista à tentação de adicionar um atalho para tudo. Links demais para ignorar conteúdo se tornam seu próprio bloco de conteúdo repetido pelo qual é preciso passar com Tab.

Lembre-se de que regiões landmark bem definidas já permitem que pessoas que usam leitores de tela pulem de uma região para outra. Links de salto extras atendem principalmente quem enxerga e usa o teclado.

Liste os atalhos em uma ordem lógica, geralmente com o conteúdo primeiro, já que é por isso que a maioria das pessoas veio. Coloque os menos usados por último.

Percorra o conjunto com Tab e ative cada link. Confirme que o foco chega à região correta todas as vezes, sem parar um elemento antes ou depois. ✅

Em páginas grandes, ofereça alguns links para ignorar conteúdo em uma navegação identificada, cada um com seu próprio destino focável. Mantenha o conjunto curto e priorize o conteúdo. 🎯