Melhorando a Acessibilidade com :focus-visible no CSS

A acessibilidade na web é um fator essencial para garantir que todos os usuários tenham uma boa experiência. Uma das melhorias mais significativas nos últimos anos é a introdução da pseudo-classe :focus-visible, que permite um controle mais inteligente da estilização do foco nos elementos interativos.

O Problema com :focus

Antes do :focus-visible, a principal forma de estilizar um elemento em foco era através da pseudo-classe :focus. No entanto, isso criava um problema: o foco era aplicado tanto para navegação via teclado quanto para cliques com o mouse, resultando em uma experiência visual indesejada.

Exemplo com :focus:

button:focus {
  outline: 3px solid blue;
}

Isso pode ser inconveniente porque o :focus afeta até usuários que estão apenas clicando nos botões com o mouse, criando um efeito visual desnecessário.

A Solução: :focus-visible

A pseudo-classe :focus-visible foi criada para solucionar esse problema, exibindo o foco apenas quando necessário — como ao navegar via teclado. Isso melhora a experiência do usuário, sem comprometer a acessibilidade.

Exemplo com :focus-visible:

button:focus-visible {
  outline: 3px solid blue;
}

Diferença entre :focus e :focus-visible

Pseudo-classe	Exibe foco ao clicar com o mouse?	Exibe foco ao navegar com teclado?
:focus	✅ Sim	✅ Sim
:focus-visible	❌ Não	✅ Sim

Exemplo em Formulário Acessível

Outro caso prático de :focus-visible é em formulários. Com ele, evitamos que usuários que apenas clicam nos campos vejam um destaque indesejado.

Exemplo:

input:focus-visible {
  border: 2px solid green;
}

Suporte dos Navegadores

Atualmente, :focus-visible é suportado na maioria dos navegadores modernos, incluindo Chrome, Edge, Firefox e Safari. Você pode verificar a compatibilidade no Can I Use.

Conclusão

A pseudo-classe :focus-visible é uma melhoria essencial para acessibilidade, garantindo que o foco seja exibido somente quando necessário. Se você ainda não está usando, considere adicioná-la ao seu projeto para melhorar a experiência do usuário! 🚀

Obrigado por ler este artigo. Espero poder fornecer-lhes algumas informações úteis. Se sim, eu ficaria muito feliz se você recomendasse este post e clicasse no botão do ♥ para que mais pessoas possam ver isso.