Acessibilidade com ESLint: Usando o eslint-plugin-jsx-a11y
A acessibilidade deve ser tratada como parte essencial do desenvolvimento web desde o início. Uma forma eficiente de garantir isso é com linters que apontam boas práticas diretamente no seu código. É aí que entra o eslint-plugin-jsx-a11y.
O que é?
Esse plugin do ESLint fornece regras específicas para verificar problemas de acessibilidade em elementos JSX (React). Ele ajuda a prevenir erros comuns como:
- Imagens sem
alt - Botões sem texto ou
aria-label - Falta de associação entre
labeleinput - Uso incorreto de
aria-*ou ausência de semântica - Entre outros
Como configurar?
Se você já usa ESLint, é só instalar o plugin:
npm install eslint-plugin-jsx-a11y --save-dev
Depois, adicione ao seu .eslintrc:
{
"plugins": ["jsx-a11y"],
"extends": ["plugin:jsx-a11y/recommended"]
}
Pronto! Seu linter começará a apontar problemas de acessibilidade no seu código.
Por que usar?
O plugin atua como um “guia invisível” que te alerta sobre más práticas de acessibilidade antes mesmo de rodar o projeto. Ele complementa ferramentas como jest-axe, que rodam testes após a renderização.
Com eslint-plugin-jsx-a11y, você incorpora acessibilidade ao seu fluxo de desenvolvimento de forma contínua, educativa e preventiva. Menos bugs, mais inclusão — direto no seu editor.
