ACESSIBILIDADE ≠ OVERLAY · 38
Foco de teclado visível quando um cabeçalho fixo tapa o passo seguinte
📅 11 de novembro de 2026 · ⏱ 6 min de leitura
Ao premir Tab, o navegador pode mover o foco para um controlo atrás de um cabeçalho fixo. A página continua a responder, mas a pessoa perde a referência visual de que precisa para avançar.
01. O teste de uma reserva
Abra uma página de reservas e escolha uma data com o teclado. Ao avançar com Tab, espera encontrar a ligação que explica as alterações ou o botão para continuar. O documento desloca-se alguns píxeis e o contorno desaparece. O foco chegou ao controlo correto, mas o cabeçalho que permanece no topo cobre-o. Se premir Enter, pode mudar de passo sem ter visto que ação estava prestes a ativar.
É fácil não reparar nesta situação quando se revê o desenho com um rato. O ponteiro indica a posição escolhida e permite ajustar o deslocamento antes de agir. Com o teclado, o navegador move o foco segundo a ordem do documento e decide quando deslocar a vista. Preserve essa sequência no teste. Deslocar manualmente a página antes de observar pode esconder precisamente o problema que procura reproduzir.
02. Distinga foco, indicador e ordem
O foco identifica o elemento que recebe a entrada do teclado. O indicador é o sinal visual que permite localizá-lo. A ordem determina qual é o controlo seguinte. Um cabeçalho sobreposto pode tapar um botão com um indicador bem definido. Um botão também pode estar visível sem apresentar qualquer sinal quando recebe foco. Pode ainda ver-se perfeitamente um controlo a que se chega num momento incoerente da tarefa.
Para isolar o problema, anote o controlo esperado e o que recebe o foco. Se utilizar as ferramentas do navegador, consulte o elemento ativo sem mudar o foco da página ou repita a sequência com o inspetor preparado. Compare o retângulo do controlo com o da camada sobreposta. Uma captura mostra o sintoma. Os passos de teclado e o estado do componente tornam o resultado reproduzível.
03. O que exigem as WCAG 2.2
O critério 2.4.7, de nível AA, diz respeito à visibilidade do indicador de foco. O 2.4.11, também AA, verifica se um componente focado permanece pelo menos parcialmente visível perante conteúdo criado pelo sítio. Avalie ambos separadamente. Ver um pequeno fragmento do botão pode evitar a ocultação total e continuar a dificultar a compreensão da ação.
O critério 2.4.12, de nível AAA, aborda a ocultação parcial. Como objetivo de desenho, procure manter visíveis o controlo completo e o seu indicador. O critério 2.4.3, de nível A, exige que a ordem sequencial preserve significado e operação quando a sequência interfere com ambos. Um cabeçalho fixo pode provocar o incumprimento de um requisito mesmo quando os outros são satisfeitos. Descreva no relatório o comportamento observado e cite o critério correspondente.
04. Localize a camada que ocupa o espaço de leitura
Um cabeçalho fixo pode mudar de altura ao deslocar a página, abrir o menu ou estreitar a janela. Um aviso inferior, uma barra de ações ou um painel de ajuda podem ocupar parte do mesmo ecrã. Cada componente pode funcionar bem isoladamente e deixar pouco espaço quando combinado com os restantes. A altura que interessa é a que ocupa no estado em que o problema ocorre.
Verifique qual é o contentor que se desloca. Numa página simples, costuma ser o documento. Numa aplicação, pode ser um painel interno com deslocamento e barra próprios. Um ajuste no documento pode não chegar a esse painel. Desative temporariamente a posição fixa no inspetor e repita a mesma sequência. Se o controlo reaparecer, já tem uma hipótese concreta para testar no modelo.
05. Reserve espaço no contentor com deslocamento
Uma opção consiste em definir scroll-padding-block-start no contentor com deslocamento para acomodar a altura do cabeçalho. Se existir uma barra fixa em baixo, avalie scroll-padding-block-end. A técnica C43 do W3C mostra como combinar o recuo de deslocamento com espaço real para que o último elemento possa sair de trás de uma barra. Verifique o início e o fim do percurso, porque o deslocamento tem limites.
Uma altura copiada da versão de computador pode ficar curta quando o menu ocupa duas linhas. Utilize valores que reflitam os estados do modelo e teste alterações de tamanho. Se a camada ocupar demasiado espaço num ecrã baixo, permitir que se desloque com o conteúdo pode ser a melhor decisão. Verifique o deslocamento automático do foco e as ligações internas, que também podem colocar conteúdo junto ao cabeçalho.
06. Torne o indicador de foco visível em cada estado
Mantenha o indicador do navegador ou desenhe um que se distinga nas superfícies reais do sítio. Um contorno útil num cartão branco pode perder-se num menu azul. Teste botões principais, ligações de texto, ícones e campos. Verifique os estados normal e visitado e examine o contraste no contexto em que aparece cada controlo.
O seletor CSS :focus-visible permite aplicar estilos quando o navegador determina que deve mostrar o sinal. Evite remover globalmente o contorno sem uma alternativa testada. Analise contentores que o cortam com overflow e regras que o escondem quando os módulos se sobrepõem. Se o controlo só for reconhecível quando o ponteiro passa por cima, volte ao teclado e examine o estado a que o tema está a aplicar estilos.
07. Repita nos dois sentidos e com ampliação
Parta de um estado reproduzível e registe o navegador, o tamanho da janela e a ampliação. Avance com Tab e volte com Shift+Tab. Observe cada controlo no momento em que recebe foco. Teste junto aos limites superior e inferior e ao chegar ao último elemento de um painel. Algumas camadas tapam conteúdo apenas ao recuar, quando o navegador desloca a página no sentido contrário.
Repita com o cabeçalho expandido, o menu fechado e os avisos comuns numa primeira visita. Num ecrã estreito ou com ampliação, o texto pode ocupar várias linhas e reduzir a altura disponível. Uma gravação curta da sequência exata ajuda a distinguir um salto no deslocamento de uma mudança de foco. A pessoa deve conseguir identificar o controlo atual antes de decidir se o ativa.
08. Corrija o modelo Divi e verifique o percurso
Em WordPress, descubra se o cabeçalho vem do tema, de um modelo do Theme Builder ou de um módulo que permanece fixo. Identifique onde a altura é definida e qual a regra que governa o deslocamento. Corrija o componente que causa a sobreposição e reveja as páginas que o reutilizam. Inclua pelo menos uma página longa, um formulário e um percurso com navegação interna.
Um overlay pode disponibilizar ajustes de apresentação, mas a geometria do cabeçalho, a ordem de navegação e o espaço reservado pertencem à implementação. Uma ferramenta automática pode encontrar problemas pontuais. O teste que encerra este caso é voltar a completar a reserva com teclado, ver cada passo quando recebe foco e confirmar que é possível avançar ou recuar sem perder a referência.