eslint-plugin-react-a11y
React accessibility rules for WCAG compliance.
Accessibility Compliance
Ensure your React applications meet WCAG accessibility standards.
Install
npm install -D eslint-plugin-react-a11yLive from GitHub
This content is fetched directly from README.md on GitHub and cached for 1 hour.
⭐ If this plugin caught a real bug for you, star the repo — it's the signal that keeps these rules maintained.
Description
This plugin provides Accessibility (a11y) rules for React applications, enforcing WCAG standards.
- Why — a linter nobody reads protects nothing. We would rather miss a finding than spend your attention on one that was never real.
- How — evidence, not names. A rule fires on what the code does, resolved through the AST and ESLint's own scope analysis.
- What — every finding carries its fix, in prose for a human and as structured JSON for an agent. Security rules add a CWE mapping and, where assigned, a CVSS score.
That trade costs recall, and we measure it: methodology · results · a false positive is a bug.
Getting Started
- To check out the guide, visit eslint.interlace.tools. 📚
npm install eslint-plugin-react-a11y --save-dev⚙️ Configuration Presets
| Preset | Description |
|---|---|
recommended | Enables critical accessibility rules (WCAG Level A as errors, AA as warnings) |
strict | Enforces all rules as errors for maximum WCAG compliance |
wcag-a | Only rules required for WCAG 2.1 Level A compliance |
wcag-aa | Includes Level A + additional rules for Level AA compliance |
Configuration Examples
Basic Usage
// eslint.config.js
import reactA11y from 'eslint-plugin-react-a11y';
export default [reactA11y.configs.recommended];With TypeScript
import reactA11y from 'eslint-plugin-react-a11y';
import tseslint from 'typescript-eslint';
export default [
...tseslint.configs.recommended,
reactA11y.configs.recommended,
{
files: ['**/*.{ts,tsx}'],
rules: {
'react-a11y/img-requires-alt': 'error',
},
},
];Strict WCAG Compliance
import reactA11y from 'eslint-plugin-react-a11y';
export default [
reactA11y.configs['wcag-aa'],
{
// Additional customizations
},
];Custom Configuration
import reactA11y from 'eslint-plugin-react-a11y';
export default [
{
plugins: {
'react-a11y': reactA11y,
},
rules: {
'react-a11y/img-requires-alt': [
'error',
{
allowAriaLabel: true,
allowAriaLabelledby: true,
},
],
'react-a11y/anchor-ambiguous-text': [
'warn',
{
words: ['click here', 'here', 'more', 'read more', 'learn more'],
},
],
},
},
];📦 Compatibility
| Package | Version |
|---|---|
| ESLint | ^8.40.0 || ^9.0.0 || ^10.0.0 |
| Node.js | >=18.0.0 |
See the ESLint Version Support Policy — current ecosystem share data, the 20% gate, and the forward-looking exception that covers v10.
Rules
Legend
| Icon | Description |
|---|---|
| 💼 | Recommended: Included in the recommended preset. |
| ⚠️ | Warns: Set to warn in recommended preset. |
| 🔧 | Auto-fixable: Automatically fixable by the --fix CLI option. |
| 💡 | Suggestions: Providing code suggestions in IDE. |
| 🚫 | Deprecated: This rule is deprecated. |
| 🟢 | Type-unaware: AST-only, runs in oxlint JS-plugin tier. |
| 🟡 | Type-aware (refining): pure-AST primary path; types refine precision. |
| 🟠 | Type-aware (graceful): requires TS program; silent without it. |
| Rule | CWE | OWASP | CVSS | Description | 🧠 | 💼 | ⚠️ | 🔧 | 💡 | 🚫 |
|---|---|---|---|---|---|---|---|---|---|---|
| alt-text | CWE-252 | Enforce alt text on images and other visual elements that carry accessibility impact. | 🟢 | 💼 | 💡 | |||||
| anchor-ambiguous-text | anchor-ambiguous-text rule | 🟢 | ⚠️ | 💡 | ||||||
| anchor-has-content | anchor-has-content rule | 🟢 | 💼 | 💡 | ||||||
| anchor-is-valid | anchor-is-valid rule | 🟢 | ⚠️ | 💡 | ||||||
| aria-activedescendant-has-tabindex | aria-activedescendant-has-tabindex rule | 🟢 | ⚠️ | 💡 | ||||||
| aria-props | aria-props rule | 🟢 | 💼 | 💡 | ||||||
| aria-role | aria-role rule | 🟢 | 💼 | 💡 | ||||||
| aria-unsupported-elements | aria-unsupported-elements rule | 🟢 | 💼 | 💡 | ||||||
| autocomplete-valid | autocomplete-valid rule | 🟢 | ⚠️ | 💡 | ||||||
| click-events-have-key-events | click-events-have-key-events rule | 🟢 | 💼 | 💡 | ||||||
| control-has-associated-label | control-has-associated-label rule | 🟢 | ⚠️ | 💡 | ||||||
| heading-has-content | heading-has-content rule | 🟢 | 💼 | 💡 | ||||||
| html-has-lang | html-has-lang rule | 🟢 | 💼 | 💡 | ||||||
| iframe-has-title | iframe-has-title rule | 🟢 | 💼 | 💡 | ||||||
| img-redundant-alt | img-redundant-alt rule | 🟢 | ⚠️ | 💡 | ||||||
| interactive-supports-focus | interactive-supports-focus rule | 🟢 | 💼 | 💡 | ||||||
| label-has-associated-control | label-has-associated-control rule | 🟢 | ⚠️ | 💡 | ||||||
| lang | lang rule | 🟢 | 💼 | 💡 | ||||||
| media-has-caption | media-has-caption rule | 🟢 | ⚠️ | 💡 | ||||||
| mouse-events-have-key-events | mouse-events-have-key-events rule | 🟢 | ⚠️ | 💡 | ||||||
| no-access-key | no-access-key rule | 🟢 | ⚠️ | 💡 | ||||||
| no-aria-hidden-on-focusable | no-aria-hidden-on-focusable rule | 🟢 | 💼 | 💡 | ||||||
| no-autofocus | no-autofocus rule | 🟢 | ⚠️ | 💡 | ||||||
| no-distracting-elements | no-distracting-elements rule | 🟢 | 💼 | 💡 | ||||||
| no-interactive-element-to-noninteractive-role | no-interactive-element-to-noninteractive-role rule | 🟢 | ⚠️ | 💡 | ||||||
| no-keyboard-inaccessible-elements | no-keyboard-inaccessible-elements rule | 🟢 | 💼 | 💡 | ||||||
| no-missing-aria-labels | no-missing-aria-labels rule | 🟢 | ⚠️ | 💡 | ||||||
| no-noninteractive-element-interactions | no-noninteractive-element-interactions rule | 🟢 | ⚠️ | 💡 | ||||||
| no-noninteractive-element-to-interactive-role | no-noninteractive-element-to-interactive-role rule | 🟢 | ⚠️ | 💡 | ||||||
| no-noninteractive-tabindex | no-noninteractive-tabindex rule | 🟢 | ⚠️ | 💡 | ||||||
| no-redundant-roles | no-redundant-roles rule | 🟢 | ⚠️ | 💡 | ||||||
| no-static-element-interactions | no-static-element-interactions rule | 🟢 | ⚠️ | 💡 | ||||||
| prefer-tag-over-role | prefer-tag-over-role rule | 🟢 | ⚠️ | 💡 | ||||||
| role-has-required-aria-props | role-has-required-aria-props rule | 🟢 | 💼 | 💡 | ||||||
| role-supports-aria-props | role-supports-aria-props rule | 🟢 | 💼 | 💡 | ||||||
| scope | scope rule | 🟢 | 💼 | 💡 | ||||||
| tabindex-no-positive | tabindex-no-positive rule | 🟢 | ⚠️ | 💡 |
🔗 Related ESLint Plugins
Part of the Interlace ESLint ecosystem — AI-native rules with LLM-optimized error messages:
Security
Code quality
| Plugin | Downloads | Description |
|---|---|---|
eslint-plugin-conventions | Team-specific habits and styles. | |
eslint-plugin-import-next | Fast cycle + import-graph analysis. | |
eslint-plugin-maintainability | Cognitive load and clean-code patterns. | |
eslint-plugin-modernization | ESNext migration + syntax evolution. | |
eslint-plugin-modularity | Structural integrity and DDD patterns. | |
eslint-plugin-operability | Production readiness and resource health. | |
eslint-plugin-react-features | React best practices and optimization. | |
eslint-plugin-reliability | Runtime stability and error safety. |
⭐ Support & follow
If this plugin caught a real bug for you, star the repo — stars are the signal that keeps the Interlace ESLint ecosystem maintained — and follow the writeups on Dev.to for the benchmarks and security research behind these rules.
📄 License
MIT © Ofri Peretz
View README.md on GitHub →
Building secure JavaScript with Interlace? Star the repo to get new rules and CWE coverage as we ship them — or follow the AI-code-security benchmarks behind them.