Foco visível

A Silktide verifica se os controlos da sua página — links, botões e campos de formulário — mudam visivelmente quando são selecionados com o teclado. Sem uma alteração visível, os utilizadores de teclado não conseguem saber onde estão na página.

Pode experimentar: carregue uma página e prima repetidamente a tecla Tab. Cada controlo onde parar deve alterar a sua aparência, por exemplo, apresentando um contorno ou uma cor de fundo diferente.

Todos os controlos padrão do navegador mostram o foco por predefinição, por isso uma falha neste ponto quase sempre significa que uma folha de estilos desativou o indicador predefinido ou que um controlo personalizado foi criado sem um.

Por que isto é importante

As pessoas que não podem usar um rato navegam com a tecla Tab, e o indicador de foco é a única forma de saberem em que controlo estão. Quando um designer o remove — muitas vezes porque o contorno predefinido foi considerado desagradável — os utilizadores de teclado ficam a premir teclas às cegas, sem saberem o que a tecla Enter irá ativar.

Como corrigir

Encontre onde o seu desativa o foco, normalmente numa regra como outline: none ou outline: 0, e remova-a.
Se substituir o contorno predefinido, forneça uma alternativa clara no estado :focus:


/* Restaura um indicador visível para campos com foco */
input:focus {
  outline: 2px solid #396196;
}

Dê aos controlos personalizados, como os seus próprios menus pendentes ou barras deslizantes, um estilo de foco explícito — não têm um estilo predefinido.

Para saber quão proeminente deve ser um indicador, consulte Foco claro, a verificação complementar mais rigorosa.

Como a Silktide faz esta verificação

Simula um utilizador de teclado a percorrer com a tecla Tab todos os elementos focáveis da página, ignorando os elementos que excluiu da verificação, os elementos ocultos para utilizadores com visão e os elementos com um tabindex de -1.
Compara os estilos de cada elemento nos estados com e sem foco.
Sinaliza os elementos cuja aparência não muda de forma que um utilizador com visão consiga distinguir quando recebem .

Resolução de problemas

O estilo de foco precisa de JavaScript para aparecer

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

Estilos de foco que não conseguimos medir

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

Foco desenhado com pseudo-elementos como ::before ou ::after.
Foco aplicado através de :focus-within num contentor.
Estilos de foco aplicados em cascata a 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 sinalizados.

Elementos inesperados são focáveis

As 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 com o teclado. Se um aparecer nos seus resultados, pode ser realmente alcançado pelo teclado e precisa de um estilo de foco. Consulte tabindex no MDN.