Análise estática e bloqueios de CI para acessibilidade

Os testes são executados depois que o código é escrito, mas um verificador de estilo sinaliza problemas enquanto você digita. Quanto mais cedo você identificar um problema, mais barato será corrigi-lo.

Em projetos React, o plug-in eslint-plugin-jsx-a11y do ESLint verifica seu JSX em busca de erros comuns de acessibilidade diretamente no editor.

O jsx-a11y identifica situações como uma imagem sem propriedade alt, uma âncora sem href ou um manipulador de clique em um elemento não interativo.

Adicione a propriedade alt e o aviso desaparecerá. A correção é mínima, e você a viu antes mesmo de o código ser publicado.

Um verificador de estilo lê o código-fonte, não a página renderizada. Ele não consegue medir o contraste nem a ordem do foco; por isso, complementa, mas não substitui, as verificações do axe.

Uma barreira de CI é uma verificação que precisa passar antes que o código possa ser incorporado. Se o seu teste de acessibilidade falhar, a solicitação de pull será simplesmente bloqueada.

Sem uma barreira, uma auditoria reprovada é apenas um aviso que todos ignoram. Uma barreira transforma a acessibilidade em um requisito, não em uma sugestão feita por mera gentileza.

Um fluxo de trabalho de CI instala as dependências e depois executa os comandos de verificação de estilo e de teste. Um código de saída diferente de zero reprova automaticamente o trabalho.

Quando a compilação fica vermelha, o autor vê no registro a regra e o elemento exatos que falharam. O ciclo de feedback leva minutos, não semanas.

Uma barreira que falha pelos motivos errados acaba sendo desativada. Mantenha os testes estáveis e com escopo definido, para que a equipe confie que uma compilação vermelha representa um problema real.

A configuração mais robusta combina tudo: verificação de estilo durante a codificação, axe nos testes e uma barreira de CI na incorporação. Cada camada identifica o que as outras deixam passar.

Faça a verificação de estilo enquanto codifica, execute o axe nos testes e crie uma barreira para incorporações na CI. Juntas, essas proteções impedem que regressões de acessibilidade sejam publicadas. 🚦