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çãomax()
, assegurando que ela não seja reduzida a menos de1px
, ao mesmo tempo em que permite sua adaptação proporcional com a unidadeem
.
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.