Skip Link Snippet

Quem navega por teclado começa cada página pelo topo e vai de Tab em Tab. Se o cabeçalho tem trinta links de menu, chegar ao conteúdo custa trinta toques — em toda página do site. O skip link resolve isso: é o primeiro elemento focável do documento, fica invisível até receber foco e, quando ativado, leva direto ao conteúdo principal.

Informe o id do elemento que recebe o foco e a página monta o link com o CSS que o acompanha. A técnica está toda nesse CSS: o link é tirado da tela com posicionamento absoluto bem à esquerda, e a regra de foco o traz de volta para o canto superior com fundo sólido e z-index alto. É por isso que ele não pode ser escondido com display none nem visibility hidden — os dois removem o elemento da ordem de tabulação, e aí ele nunca recebe foco.

Dois detalhes de montagem. O alvo precisa existir com esse id, normalmente o elemento main, e vale acrescentar tabindex igual a menos um nele: sem isso, alguns navegadores movem a rolagem mas não o foco, e o Tab seguinte volta para o começo do menu. E o skip link tem de ser o primeiro elemento focável do body, antes de qualquer coisa do cabeçalho — colocado depois do menu, ele não pula nada.