Testes de acessibilidade: color-contrast e foco

O CSS controla o contraste de cores, a visibilidade do indicador de foco, a visibilidade dos elementos (display:none os remove da árvore de acessibilidade) e a ordem de leitura (reordenação visual por meio da propriedade order do flexbox em comparação com a ordem do DOM). As escolhas de CSS afetam diretamente a possibilidade de pessoas com deficiência utilizarem a interface.

A WCAG 2.1 AA exige uma proporção de contraste de 4.5:1 para texto normal e de 3:1 para texto grande (negrito de 18px ou mais, ou regular de 24px ou mais). A AAA exige, respectivamente, 7:1 e 4.5:1. Essas proporções comparam a luminância da cor do texto em primeiro plano com a luminância da cor de fundo.

Clique em qualquer elemento de texto no DevTools → painel de estilos. A amostra de cor mostra um indicador com a proporção de contraste. Uma marca de verificação indica aprovação; um X indica falha. O seletor de cores mostra as linhas dos limites AA/AAA no gradiente de cores.

axe-core, Lighthouse e Pa11y auditam automaticamente as proporções de contraste de todos os elementos de texto. Execute o axe-core com @axe-core/react durante o desenvolvimento para receber avisos de contraste em tempo real no console do navegador.

O CSS outline: none ou outline: 0 em :focus remove o anel de foco padrão do navegador, tornando invisível a navegação pelo teclado. Essa é uma falha crítica de acessibilidade. Substitua-o por um estilo de foco personalizado e visível, em vez de remover completamente os indicadores de foco.

:focus é aplicado a todos os eventos de foco, incluindo cliques do mouse (o que causa um anel visível ao clicar, algo que os designers não gostam). :focus-visible é aplicado somente quando o navegador determina que a navegação pelo teclado está sendo usada, oferecendo um anel de foco às pessoas que usam o teclado sem exibi-lo nos cliques do mouse.

A WCAG 2.2 introduz o Critério de Sucesso 2.4.11 (Aparência do foco AA): os indicadores de foco devem ter pelo menos 3:1 de contraste em relação às cores adjacentes e abranger o perímetro do componente. Os estilos de foco personalizados devem atender a esses requisitos, não apenas existir.

O modo de Alto Contraste do Windows substitui as cores do CSS por cores do sistema definidas pelo usuário. Use @media (forced-colors: active) para fornecer estilos alternativos que funcionem no modo de alto contraste. Teste em Configurações do Windows → Acessibilidade → Alto contraste.

A WCAG 1.4.1 proíbe usar a cor como única forma de transmitir informações. Um estado de erro que apenas muda para vermelho não atende a esse critério. Combine a cor com ícones, rótulos de texto, padrões ou sublinhados para que informações que não dependam de cores estejam sempre presentes.

A WCAG 1.4.4 exige que o texto possa ser redimensionado para 200% sem perda de conteúdo. A WCAG 1.4.12 exige que substituições de espaçamento de texto (aumento de letter-spacing e line-height) não quebrem o leiaute. Use unidades relativas (rem, em) na tipografia para atender aos dois requisitos.

Testes abrangentes de acessibilidade do CSS: a extensão de navegador axe DevTools para desenvolvimento, o Lighthouse CI para verificações automatizadas do fluxo, o Pa11y para auditorias de páginas pela linha de comando e testes manuais de navegação pelo teclado com Tab/Shift+Tab para verificar a visibilidade e a ordem dos indicadores de foco.

Por que outline: none nunca deve ser o CSS final para o estado :focus de um elemento?

Os testes de acessibilidade do CSS abrangem proporções de contraste de cores (mínimo de 4.5:1 para AA), indicadores de foco visíveis e em conformidade com a WCAG 2.2 usando :focus-visible, a não utilização da cor como única forma de transmitir informações, o suporte ao modo forced-colors e unidades relativas de tipografia para atender aos requisitos de redimensionamento. Ferramentas automatizadas combinadas com testes manuais pelo teclado garantem uma cobertura abrangente.