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.
Top comments (0)