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.
Top comments (14)
Parabéns pelo post! Sempre bom conteúdos que prezam pela acessibilidade <3
Excelente!
Parabéns pelo artigo, muito bom!
Parabens pelo artigo incrivel primo!
Quem gosta de CSS? eu sempre passo perrengue! obrigada pelo conteudo!
Belo artigo primo!!
Obrigado por compartilhar, primo <3
Parabéns pelo artigo
Boa, ficou muito bom!!!
Esse artigo ficou ótimo!!!