Esta tradução ainda não foi revista editorialmente. A versão alemã é vinculativa. Deutsche Fassung

Acessibilidade

Por que uma barra de cabeçalho fixa nunca pode ocultar completamente o foco do teclado?

Uma barra de cabeçalho fixa, um aviso de cookie ou um rodapé aderente nunca podem ocultar completamente o elemento atualmente focado, pois os utilizadores de teclado deixam de ver onde estão. O critério 2.4.11 foi adicionado recentemente com WCAG 2.2: ao mover o foco através da página, o elemento ativo deve permanecer pelo menos parcialmente visível — mesmo que partes da página flutuem sobre o conteúdo ao deslocar.

Como as barras fixas engolfam o foco

Muitos websites fixam elementos na borda do ecrã: a barra de menu acima, um aviso de cookie abaixo, talvez um banner de newsletter entre eles. Estas camadas flutuam sobre o conteúdo. Quando o foco do teclado navega pela página, o elemento ativo pode estar exatamente atrás de uma destas barras — o quadro de foco está lá, mas ninguém o vê. Para utilizadores de teclado isto parece que o foco desapareceu: continuam a clicar em Tab e não sabem que botão a tecla Enter vai atingir. Especialmente problemáticos são avisos de cookie altos na base, atrás dos quais linhas inteiras do formulário podem desaparecer ao navegar.

Assim o serviço de verificação mede a ocultação de foco

Durante a navegação real por teclado, o serviço de verificação verifica vários pontos do elemento ativo em cada paragem: se uma superfície opaca, fixa ou aderente está em toda a parte, o elemento é considerado completamente oculto — o critério é violado e o relatório nomeia o elemento com prova fotográfica. A medição julga deliberadamente com cautela: elementos que são parte de uma barra fixa nunca são considerados ocultos atrás dela, e sobreposições transparentes não contam como ocultação. Se o elemento permanece pelo menos parcialmente visível em todas as paragens, o critério é considerado cumprido.

Exemplos

Foco atrás do cabeçalho adesivo

Não encontrado

header { position: sticky; top: 0; height: 80px; }
/* Tab scrollt das Element unter den Header */

Realizado

header { position: sticky; top: 0; height: 80px; }
html { scroll-padding-top: 88px; }

o preenchimento de rolagem mantém a área sob o cabeçalho limpa ao mudar de foco. Banners de cookies capturam o foco até que estejam fechados.

Navegue pela sua página e observe a borda inferior do ecrã — o foco desaparece temporariamente atrás do aviso de cookie?
Mantenha as barras fixas o mais estreitas possível, especialmente em ecrãs pequenos.
Peça à sua agência para planear uma distância de deslocamento ao focar, para que o elemento ativo nunca caia sob barras fixas.
Teste com o aviso de cookie visível — é exatamente neste estado que os visitantes pela primeira vez veem a sua página.

Deutsche Fassung dieser Seite

FAQ

O que significa «foco não oculto» em WCAG 2.2?

O critério 2.4.11 exige: quando um elemento recebe o foco do teclado, não pode estar completamente atrás de outros conteúdos — como barras de menu fixas, avisos de cookie ou rodapés aderentes. Pelo menos uma parte do elemento deve permanecer visível. Caso contrário, os utilizadores de teclado perdem a orientação porque o seu único indicador de localização fica invisível.

As barras de menu fixas e os avisos de cookie são proibidos com isto?

Não. As barras fixas permanecem permitidas — apenas não podem sobrepor completamente o elemento atualmente focado. Na prática isto significa: manter as barras estreitas e planear uma distância de deslocamento ao focar, para que o elemento ativo permaneça visível acima ou abaixo da barra. Ambas as coisas são resolvidas com poucas linhas nas especificações de design.

Como é medida automaticamente a ocultação de foco?

O nosso serviço de verificação navega de verdade pela página e verifica vários pontos do elemento ativo em cada paragem: se há uma superfície opaca fixa em toda a parte, o elemento é considerado completamente oculto e o critério é violado — com prova fotográfica. Sobreposições transparentes e elementos que estão numa barra fixa não são deliberadamente penalizados.