# Otimizando Acessibilidade Web com :focus-visible

> Neste drop explico como funciona a nova pseudo-class ":focus-visible" no CSS e mostro como ela nos ajuda a melhorar acessibilidade web.

- Canonical: https://betomuniz.com/blog/otimizando-acessibilidade-web-com-focus-visible
- Published: 2020-11-20
- Updated: 2026-04-21T17:44:00.000Z
- Language: pt

---

`focus-visible` é uma nova pseudo-class CSS que aplica estilos de foco em elementos focáveis baseado nos modelos que o próprio browser usa para definir seus estilos padrões de foco.

A diferença da `:focus-visible` e do `:focus`, é que com `:focus`, **qualquer modalidade de foco herdará tal estilo**, já com `:focus-visible`, **apenas onde o browser aplica estilos de foco herdarão** as regras CSS declaradas.

```css
.btn:focus-visible {
  outline: 4px dashed rebeccapurple;
}
```

Se o desenvolvedor aplica `outline: none;` em botão via `.btn:focus`, seja no ato de click, tap ou de seleção deste botão via tecla `tab` no teclado, o estilo de foco padrão do browser será ocultado.

Já usando `.btn:focus-visible`, o desenvolvedor não modifica os atos de foco padrões do browser para _click_ e _tap_ do botão e aplica estilos somente nos atos de seleção via teclado para auxiliar usuários que usam ferramentas assistivas ou o teclado para navegar.

Vale lembrar que estilos de foco via _click_, _tap_ e teclado variam de elemento para elemento e de _browser_ para _browser_. Um exemplo são os elementos `<input>` e `<a>` que tem comportamento de foco diferente do elemento `<button>`. Portanto, evite regras genéricas.