Foco não obscurecido
A Silktide verifica se, quando um controlo é selecionado com o teclado, não fica completamente oculto atrás de outro conteúdo, como um banner de cookies ou um cabeçalho fixo. Um utilizador de teclado que não consiga ver o controlo selecionado não tem como saber onde está na página.
As causas mais comuns são elementos que permanecem fixos enquanto a página rola:
- Banners no topo ou na parte 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 passe para trás delas
Esta verificação abrange a ocultação total, conforme exigido pelo Nível AA (critério 2.4.11). O mais rigoroso, Foco não parcialmente obscurecido, também sinaliza controlos que estão apenas parcialmente cobertos.
Por que isto é importante
As pessoas que navegam pelo teclado seguem o indicador de para saber em que controlo estão. Quando o foco passa para um controlo escondido sob um banner de cookies ou um rodapé fixo, o indicador desaparece: o utilizador não consegue saber o que premir Enter fará, nem sequer onde está, e pode abandonar a página completamente.
Como corrigir
- Dê preferência a conteúdo que role com a página em vez de elementos fixos sobre ela.
- Quando um banner ou cabeçalho fixo tiver de permanecer, utilize as propriedades CSS
scroll-paddingouscroll-marginpara que os elementos focados rolem para fora da área que ele ocupa — 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 o foco. A maioria das bibliotecas de caixas de diálogo e o elemento nativo
<dialog>fazem isso por si.
Como a Silktide faz esta verificação
- Simula um utilizador de teclado a percorrer com Tab todos os elementos focáveis, nas vistas para computador e para dispositivos móveis da página.
- Simula o navegador a deslocar verticalmente cada elemento focado para o centro do ecrã (consulte a nota sobre deslocamento abaixo).
- Verifica se algum outro elemento está sobre o elemento focado. Elementos sobrepostos com fundos transparentes ou semitransparentes são ignorados, pois o indicador de foco continua visível através deles.
- Sinaliza o controlo se estiver completamente coberto por um elemento opaco. A sobreposição parcial não é sinalizada por esta verificação — é isso que a verificação Foco não parcialmente obscurecido testa.
Por que simulamos o deslocamento
A quantidade que um navegador desloca a página entre pressões da tecla Tab varia consoante o tamanho da janela, pelo que um cabeçalho fixo cobrir ou não um elemento focado pode variar entre ecrãs com apenas alguns píxeis de diferença na altura. Testar num ú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 deslocado para o centro do ecrã. Esta abordagem deliberadamente generosa sinaliza problemas que afetam todos os tamanhos de ecrã de forma consistente e evita problemas que afetam apenas uma altura exata da janela. A W3C não especifica como este critério deve ser testado.
Caixas de diálogo que abrem depois de a página carregar
Se uma página contiver uma caixa de diálogo fechada por predefinição, a Silktide assume que, enquanto estiver aberta, o foco não pode sair dela — que é o comportamento de uma caixa de diálogo corretamente construída. Por isso, uma caixa de diálogo com falhas que permita que o foco escape para trás dela pode não ser sinalizada, a menos que esteja aberta quando a página carregar.
Resolução de problemas
Consigo ver perfeitamente o elemento focado
Verifique numa janela mais pequena: elementos obscurecidos por cabeçalhos ou rodapés fixos muitas vezes só colidem com eles em determinadas alturas da janela. Se concluir que o elemento nunca fica significativamente obscurecido, pode ignorar o resultado.