Esta tradução ainda não foi revista editorialmente. A versão alemã é vinculativa. Deutsche Fassung →
Barrierefreiheit
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.
Beispiele
Fokus hinter der klebenden Kopfzeile
header { position: sticky; top: 0; height: 80px; }
/* Tab scrollt das Element unter den Header */header { position: sticky; top: 0; height: 80px; }
html { scroll-padding-top: 88px; }scroll-padding hält beim Fokuswechsel den Bereich unter der Kopfzeile frei. Cookie-Banner fangen den Fokus ein, bis sie geschlossen sind.
- 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.