Preserve Sempre os Contornos CSS: Uma Abordagem Essencial

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 (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.