DEV Community

Gabriel Teixeira da Silva
Gabriel Teixeira da Silva

Posted on

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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

Top comments (14)

Collapse
 
sucodelarangela profile image
Angela Caldas

Parabéns pelo post! Sempre bom conteúdos que prezam pela acessibilidade <3

Collapse
 
ilonavarro profile image
Ilo Navarro

Excelente!

Collapse
 
mateusmoov profile image
Moov

Parabéns pelo artigo, muito bom!

Collapse
 
cherryramatis profile image
Cherry Ramatis

Parabens pelo artigo incrivel primo!

Collapse
 
franolv profile image
Franciele B. de Oliveira

Quem gosta de CSS? eu sempre passo perrengue! obrigada pelo conteudo!

Collapse
 
zoldyzdk profile image
Hewerton Soares

Belo artigo primo!!

Collapse
 
phenriquesousa profile image
Pedro Henrique

Obrigado por compartilhar, primo <3

Collapse
 
pdrolucas profile image
Pedro Lucas

Parabéns pelo artigo

Collapse
 
lliw profile image
William Rodrigues

Boa, ficou muito bom!!!

Collapse
 
foxgeeek profile image
Foxgeeek

Esse artigo ficou ótimo!!!