Como evitar que cabeçalho fixo esconda o foco do teclado

Cabeçalho fixo pode cobrir o controle que recebe foco quando a pessoa percorre a página pelo teclado ou segue uma âncora. O critério WCAG 2.2 2.4.11 (AA) exige que o componente focado não fique totalmente escondido por conteúdo criado pelo autor. Deixe-o visível, de preferência sem nenhuma parte encoberta.

Reproduza antes de corrigir

1. Em cada layout, carregue a página, role para baixo e navegue com Tab e Shift+Tab. Inclua links, campos, botões, itens de menu e links que saltam para âncoras.
2. Observe controle e indicador de foco quando o cabeçalho entra sobre o conteúdo. Registre alturas, largura/orientação, zoom e se um aviso/toolbar adicional também está fixo.
3. Repita em mobile, janela estreita, zoom alto e orientação paisagem. Um cabeçalho que funciona a 100% pode ocupar quase toda a tela com ampliação.

Ajuste a área de rolagem

Para páginas em que um cabeçalho precisa continuar fixo, declare espaço no contêiner que rola ou margem nos alvos que podem ser focados. Use a altura real do cabeçalho e ajuste em cada breakpoint:

html {
  scroll-padding-block-start: 5rem;
}

:where(a, button, input, select, textarea, [tabindex]):focus {
  scroll-margin-block-start: 5rem;
}

@media (max-width: 40rem) {
  html { scroll-padding-block-start: 4rem; }
  :where(a, button, input, select, textarea, [tabindex]):focus {
    scroll-margin-block-start: 4rem;
  }
}

Esse exemplo pressupõe cabeçalho de 5rem no desktop e 4rem em mobile; substitua pelos valores medidos. Se a página rolar dentro de um contêiner, aplique scroll-padding ao contêiner correto. Confira suporte e comportamento no navegador-alvo.

Se o espaço for curto, considere remover position: sticky/fixed em janelas baixas, com zoom, ou em paisagem, em vez de reservar uma faixa enorme. A técnica W3C C34 descreve liberar a fixação por media queries; é uma técnica informativa, não a única maneira de atender WCAG.

Teste o resultado

Depois do ajuste, reinicie o percurso pelo teclado em cada tamanho e confirme visualmente que cada controle focado está pelo menos parcialmente visível e que o contorno de foco não foi cortado. Ative zoom até 400% e confira conteúdo e controles sem exigir rolagem em duas direções para leitura normal. Verifique também âncoras e menu aberto. Automação pode sinalizar problemas de foco/contraste, mas a sobreposição precisa de inspeção manual.

Fontes: Entender “Foco não obscurecido (mínimo)” — W3C WAI e Técnica C34 — W3C WAI. Consulte institucionais.