Preserve Sempre os Contornos CSS: Uma Abordagem Essencial
Published: 2023-08-09 12:03:07

Uma prática de CSS que frequentemente viola os princípios de acessibilidade é a remoção do estilo `:focus` de elementos como links, botões e outros controles interativos. Ao não oferecer uma alternativa visual para o estado `:focus`, essa abordagem constitui diretamente uma violação do [Critério de Sucesso 2.4.11 das WCAG: Aparência de Foco](https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance-minimum.html) (Focus Appearance).

Os contornos visuais são elementos cruciais para garantir a acessibilidade de um site, uma vez que eles permitem que usuários que não utilizam um mouse possam identificar e interagir com elementos clicáveis ou focáveis. Sem essa indicação, os usuários que dependem de teclados podem facilmente perder a noção de onde estão dentro da página, o que leva a uma experiência de usuário frustrante e ineficaz.

Comumente, a razão pela qual ele é removido é devido à sensação de que o estilo nativo do navegador não é atraente ou não se encaixa nas opções de design da plataforma. Mas, com CSS moderno, surge uma nova propriedade que pode ajudar a tornar os contornos mais atraentes.

Ao empregar o recurso `outline-offset`, temos a capacidade de atribuir um valor positivo para deslocar o contorno além do elemento em questão. Para realizar esse deslocamento, optaremos pela unidade `em`, permitindo posicionar o contorno em relação ao elemento conforme seu tamanho de fonte.

> Você também pode estabelecer a largura do contorno (`outline-width`) utilizando a função `max()`, assegurando que ela não seja reduzida a menos de `1px`, ao mesmo tempo em que permite sua adaptação proporcional com a unidade `em`.

```
button:focus {
  outline: max(1px, 0.1em) solid currentColor;
  outline-offset: 0.25em;
}
```
Como opção alternativa, você pode definir outline-offset utilizando um valor negativo para incorporar o contorno dentro do perímetro do elemento.

```
button:focus {
  outline: max(1px, 0.1em) dashed currentColor;
  outline-offset: -0.25em;
}
```

Além disso, há uma pseudoclasse inovadora que vale a pena considerar em determinadas situações. A pseudoclasse `:focus-visible` irá mostrar um contorno (ou estilo definido pelo usuário) apenas quando o dispositivo/navegador (agente do usuário) determinar que é necessário torná-lo visível. Em geral, isso significa que ele será exibido para usuários que navegam com teclado, após a interação com a tecla "tab", mas não para aqueles que usam o mouse.

Aproveitando essa atualização, nossos estilos de botão provavelmente serão apresentados somente quando você pressionar a tecla no botão, proporcionando uma experiência mais coesa e intuitiva.

```
button:focus {
  outline: none;
}

button:focus-visible {
  outline: max(1px, 0.1em) dashed currentColor;
  outline-offset: -0.25em;
}
```

Vale observar que o suporte à pseudoclasse `:focus-visible` ainda está sendo implementado em todos os navegadores, com uma notável ausência principalmente no Safari. Se você deseja experimentar essa funcionalidade, aqui está um exemplo de como incorporá-la de forma progressiva para melhorias.

Estamos tirando vantagem do fato de que um navegador que não reconhece a pseudoclasse `:focus-visible` ignorará a regra que remove o contorno do estado `:focus`. Ou seja, a primeira regra para `button:focus` será aplicada aos navegadores que não oferecem suporte ao `:focus-visible`, enquanto as duas regras subsequentes entrarão em vigor quando o `:focus-visible` for suportado. De maneira interessante, a construção `:focus:not(:focus-visible)` cria a ilusão de que o `:focus-visible` está funcionando no Safari e até mesmo no Internet Explorer 11.

```
button:focus {
  outline: max(1px, 0.1em) dashed currentColor;
  outline-offset: -0.25em;
}

button:focus:not(:focus-visible) {
  outline: none;
}

button:focus-visible {
  outline: max(1px, 0.1em) dashed currentColor;
  outline-offset: -0.25em;
}
```
## Conclusão
Em resumo, empregar `outline: none` sem fornecer alternativas adequadas compromete consideravelmente a acessibilidade do seu site para qualquer usuário que dependa exclusivamente do teclado, abrangendo não apenas aqueles com visão limitada. Assegure-se de sempre atribuir elementos interativos uma indicação visual clara de foco, garantindo uma experiência acessível e inclusiva para todos.

Para qualquer dúvida pessoal, estou à disposição para auxiliar e, no que eu não souber, podemos aprender em conjunto. Vamos trabalhar juntos para construir uma web mais acessível.

## Referências

- [Never remove CSS outlines](https://www.a11yproject.com/posts/never-remove-css-outlines/)

- [Understanding Success Criterion 2.4.11: Focus Appearance](https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance-minimum.html)

- [:focus-visible](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible)

- [Focusing on Focus Styles](https://css-tricks.com/focusing-on-focus-styles/)