Foco não parcialmente oculto
A Silktide verifica se, quando um controle é selecionado com o teclado, nenhuma parte dele fica oculta atrás de outro conteúdo, como um banner de cookies ou um cabeçalho fixo. Mesmo um controle parcialmente coberto pode deixar uma pessoa que usa o teclado sem saber onde está na página.
As causas mais comuns são elementos que permanecem fixos enquanto a página rola:
- Banners na parte superior ou inferior da página, como avisos de cookies
- Barras de navegação e rodapés fixos
- Caixas de diálogo pop-up que permitem que o foco se mova para trás delas
Esta é a versão mais rigorosa, de nível AAA do (critério 2.4.12), de Foco não oculto: a sinaliza apenas controles que estão completamente cobertos, enquanto esta sinaliza qualquer cobertura.
Por que isso é importante
As pessoas que navegam pelo teclado seguem o indicador de para saber em qual controle estão. Quando parte de um controle em foco desaparece sob um banner de cookies ou um rodapé fixo, a pessoa pode não perceber o indicador, interpretar incorretamente o rótulo do controle ou perder sua posição — e um controle parcialmente coberto na sua tela pode ficar totalmente coberto em uma tela menor.
Como corrigir
- Prefira conteúdo que role com a página em vez de elementos fixos sobre ela.
- Quando um banner ou cabeçalho fixo precisar permanecer, use as propriedades CSS
scroll-paddingouscroll-marginpara que os elementos em foco rolem para fora dele — consulte a técnica C43 do WCAG. - Para caixas de diálogo e pop-ups, mantenha o foco dentro delas enquanto estiverem abertas, para que nada atrás delas possa receber foco. A maioria das bibliotecas de caixas de diálogo e o elemento nativo
<dialog>fazem isso por você.
Como a Silktide verifica isso
- Simula uma pessoa usuária do teclado percorrendo com Tab todos os elementos que podem receber foco, nas visualizações para computador e dispositivos móveis da página.
- Simula o navegador rolando verticalmente cada elemento em foco até o centro da tela (consulte a observação sobre rolagem abaixo).
- Verifica se algum outro elemento está sobre o elemento em foco. Elementos sobrepostos com fundos transparentes ou semitransparentes são ignorados, pois o indicador de foco continua visível através deles.
- Sinaliza o controle se alguma parte dele estiver coberta por um elemento sólido. Se você só precisar atender ao nível AA, os casos de cobertura total são os que Foco não oculto relata.
Por que simulamos a rolagem
A quantidade de rolagem feita pelo navegador entre pressionamentos de Tab varia conforme o tamanho da janela. Por isso, um cabeçalho fixo pode ou não cobrir um elemento em foco em telas com apenas alguns pixels de diferença de altura. Testar em um único tamanho exato de janela sinalizaria problemas que ninguém com uma janela ligeiramente diferente conseguiria reproduzir.
Em vez disso, a Silktide avalia cada elemento como se tivesse sido rolado até o centro da tela. Essa abordagem propositalmente abrangente sinaliza problemas que afetam todos os tamanhos de tela de forma consistente e evita problemas que afetam apenas uma altura exata de janela. O W3C não especifica como esse critério deve ser testado.
Caixas de diálogo que abrem depois que a página é carregada
Se uma página contiver uma caixa de diálogo fechada por padrão, a Silktide pressupõe que, enquanto ela estiver aberta, o foco não poderá sair dela — que é o comportamento de uma caixa de diálogo corretamente criada. Portanto, uma caixa de diálogo com defeito que permita que o foco escape para trás dela talvez não seja sinalizada, a menos que esteja aberta quando a página for carregada.
Solução de problemas
Consigo ver claramente o elemento em foco
Verifique em uma janela menor: elementos ocultados por cabeçalhos ou rodapés fixos costumam colidir apenas em determinadas alturas de janela. Se você concluir que o elemento nunca fica significativamente oculto, poderá ignorar o resultado.