🌟 O que é o eslint-plugin-jsx-a11y?

Source: Dev.to

O que é o eslint‑plugin‑jsx‑a11y?

É um plugin do ESLint que faz uma análise estática do seu código JSX para identificar e aplicar um conjunto de regras de acessibilidade. Ele ajuda a detectar problemas potenciais antes mesmo de o código ser renderizado no navegador.

Por que ele é importante?

O plugin ajuda a prevenir erros de acessibilidade comuns que podem excluir usuários com deficiência. Ao integrar a11y ao seu fluxo de linting, você garante:

• Desenvolvimento preventivo – Corrige problemas no momento em que está escrevendo o código, o que é muito mais eficiente do que corrigir depois.
• Educação contínua – Atua como um guia, ensinando as melhores práticas de acessibilidade para elementos React/JSX.
• Conformidade – Ajuda seu código a seguir diretrizes importantes de acessibilidade, como as WCAG (Web Content Accessibility Guidelines).

Exemplos de problemas que ele detecta

• img sem alt – Alerta quando uma imagem não tem o atributo alt (texto alternativo), crucial para leitores de tela.
• onClick sem onKeyPress/onKeyDown – Verifica se elementos interativos que usam onClick também podem ser acionados pelo teclado.
• Controles de formulário sem label associado – Garante que inputs e outros controles estejam corretamente ligados a um elemento <label> (usando htmlFor).
• Uso incorreto de atributos ARIA – Valida a sintaxe e o uso dos atributos aria-.
• Links (<a>) sem conteúdo visível – Checa se links têm texto ou uma descrição ARIA.

Complemento a outras ferramentas

É importante notar que o eslint-plugin-jsx-a11y faz uma análise estática do código‑fonte (JSX). Ele não testa o HTML final renderizado na página.

Por isso, ele é frequentemente usado em conjunto com ferramentas de teste de acessibilidade em tempo de execução, como:

• react‑axe (ou @axe‑core/react) – Audita o DOM final.
• jest‑axe – Para testes unitários de acessibilidade após a renderização.

Resumo: o eslint-plugin-jsx-a11y é a sua primeira linha de defesa para garantir que a acessibilidade seja parte integrante do seu processo de desenvolvimento em React.