jsx-a11y e proteções no nível dos componentes

Muitos erros de acessibilidade são fáceis de identificar no código. Um linter pode sinalizá-los enquanto você digita, muito antes de um usuário real encontrar essa barreira. 🛡️

O pacote eslint-plugin-jsx-a11y adiciona regras de acessibilidade ao ESLint para JSX. Ele verifica se seus componentes contêm erros de acessibilidade comuns e conhecidos.

Estenda a configuração recommended do plug-in para ativar de uma só vez uma base sólida de regras, em vez de ativar cada uma manualmente.

O plug-in avisa quando uma img não tem o atributo alt. Essa única regra evita uma falha de acessibilidade muito comum e de grande impacto.

Colocar onClick em uma div sem suporte ao teclado gera um aviso. A solução é usar um button real, que pode receber foco e está pronto para o teclado.

As regras verificam se os controles de formulário têm um rótulo associado. Um campo sem rótulo é sinalizado para nunca chegar aos usuários sem identificação.

O plug-in verifica se os atributos e papéis ARIA são reais e usados corretamente. Erros de digitação como aria-lable ou papéis inválidos são detectados imediatamente.

Um linter vê apenas seu código estático. Ele não consegue avaliar se seu texto alt é significativo ou se a ordem do foco faz sentido; por isso, os testes manuais continuam importantes.

Incorpore a acessibilidade aos componentes compartilhados. Um Button reutilizável que sempre renderiza um elemento button real espalha um bom comportamento por todo o aplicativo.

Execute o ESLint no seu pipeline para que avisos de acessibilidade façam a compilação falhar. Isso impede que regressões passem pela revisão de código e cheguem à produção.

Com a extensão do ESLint para o editor, os avisos aparecem diretamente no código. Esse retorno rápido ensina padrões de acessibilidade à equipe enquanto ela escreve.

Sua equipe adiciona eslint-plugin-jsx-a11y ao projeto. O que você ainda não deve esperar que ele faça?

Use jsx-a11y para detectar erros comuns, crie componentes compartilhados acessíveis e imponha a verificação na integração contínua, mas continue dependendo de testes manuais para o restante. ✅