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!

Feb 20, 2025 - 17:50

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!