Foco claro

A Silktide verifica se os controlos da sua página — links, botões e campos de formulário — alteram a sua aparência de forma suficientemente clara quando selecionados com o teclado. Não basta que a alteração exista; ela tem de ser suficientemente grande e ter contraste elevado para ser realmente visível.

Esta é uma versão mais rigorosa de Foco visível: essa verificação pergunta se existe algum indicador de foco, enquanto esta mede se o indicador é suficientemente proeminente.

Pode experimentar: carregue uma página e prima repetidamente a tecla Tab. Cada controlo onde chegar deve mudar visivelmente, por exemplo, adquirindo um contorno distinto ou um fundo contrastante.

Por que isso é importante

As pessoas que navegam pelo teclado — incluindo muitas pessoas com limitações motoras e utilizadores de dispositivos de comutação — dependem de ver onde está o . Um indicador de foco que está tecnicamente presente, mas é ténue, fino ou tem baixo contraste, é tão inútil como a ausência total de um indicador: o utilizador perde a sua posição na página e não consegue perceber qual controlo será ativado ao premir Enter.

Como corrigir

A solução simples e fiável é um contorno sólido à volta do controlo em foco, com pelo menos 2 píxeis de espessura e uma cor que tenha contraste tanto com o controlo como com o que o rodeia.

Um indicador de duas cores garante a visibilidade independentemente do fundo:

\/* Um contorno transparente mantém um indicador no modo de cores forçadas *\/
:focus {
  outline: 2px solid transparent;
  \/* Halo claro + anel escuro: uma das duas cores terá sempre contraste *\/
  box-shadow: 0 0 0 2px #f9f9d1, 0 0 0 4px #396196, 0 0 4px 8px #f9f9d1;
}

Esta abordagem provém da técnica C40 da WCAG.

Evite indicadores ao longo de uma única extremidade, como uma borda inferior: o facto de serem suficientemente grandes depende do comprimento dessa extremidade, que varia no caso dos links de texto.

Como a Silktide faz a verificação

Simula um utilizador de teclado a percorrer com Tab todos os elementos focáveis da página, ignorando os elementos que excluiu da verificação, os elementos ocultos para utilizadores que veem e os elementos com um tabindex de -1.
Compara os estilos de cada elemento nos estados focado e não focado.
Considera aprovados os elementos que mantêm o contorno de foco predefinido do navegador ou cujo fundo muda com um contraste de pelo menos 3:1 entre os dois estados.
Caso contrário, mede os contornos, as bordas e as sombras de ambos os estados e calcula a área que muda com contraste suficiente. Para ser aprovado, essa área deve ser pelo menos tão grande como um perímetro de 2 píxeis de espessura à volta do elemento, de acordo com o requisito 2.4.13 da .

Resolução de problemas

O estilo de foco precisa de JavaScript para aparecer

Os estilos de foco devem ser definidos apenas em . Se o foco for aplicado por — por exemplo, através de um script que adiciona uma classe — a Silktide poderá não o detetar e este poderá não funcionar para tecnologias de apoio sem um teclado físico. Experimente desativar o JavaScript e percorrer a página com Tab para confirmar.

Estilos de foco que não conseguimos medir

Algumas formas de implementar o foco não podem ser detetadas ou medidas automaticamente:

Foco desenhado com pseudo-elementos como ::before ou ::after.
Foco aplicado através de :focus-within num contentor.
Estilos de foco propagados para elementos descendentes, como um <span> dentro de um link. Alguns destes casos são detetados, mas não todas as variações.

Os elementos que utilizam estas técnicas são ignorados em vez de serem assinalados.

Elementos sobre imagens ou com fundos imprevisíveis

O contraste é calculado com base numa cor de fundo conhecida. Quando um elemento se encontra sobre uma imagem ou está posicionado fora do seu elemento-pai, de forma que o seu fundo não possa ser determinado, a Silktide ignora-o em vez de fazer uma suposição.

Elementos inesperados são focáveis

Etiquetas como <div> ou <span> tornam-se focáveis quando recebem um tabindex de 0 ou superior, que é a forma como os controlos personalizados permitem a utilização pelo teclado. Se um deles aparecer nos seus resultados, é realmente acessível pelo teclado e precisa de um estilo de foco. Consulte tabindex no MDN.