Focus-Visible CSS Snippet

O contorno padrão que o navegador desenha em volta do elemento focado é o principal recurso de quem navega por teclado: sem ele, não dá para saber onde se está. Mesmo assim, a primeira coisa que muita folha de estilo faz é apagá-lo com outline none, porque ele também aparece ao clicar com o mouse, o que incomoda no visual.

A pseudo-classe focus-visible resolve o impasse. O navegador aplica ela apenas quando entende que o indicador é útil — foco por teclado, sim; clique de mouse em botão, não. Escolha a cor e a espessura e a página monta o par de regras: zera o contorno padrão e desenha o seu em focus-visible, com deslocamento para o contorno não encostar na borda do elemento.

Sobre a escolha da cor e da espessura, a WCAG 2.2 traz um critério novo, o 2.4.11, que pede contraste mínimo de 3 para 1 entre o indicador de foco e o que estava ali antes, além de área mínima. Dois pixels costumam bastar; um pixel numa cor de baixo contraste passa despercebido em tela clara. E cuidado com border-radius: contorno em elemento arredondado acompanha a curva nos navegadores atuais, mas em versões antigas sai retangular.