⭐ 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

| Plugin | Downloads | Description | | :--- | :---: | :--- | | eslint-plugin-anthropic-security | | Anthropic SDK security. | | eslint-plugin-browser-security | | XSS, DOM security. | | eslint-plugin-drizzle-security | | Drizzle security. | | eslint-plugin-express-security | | Express middleware hardening. | | eslint-plugin-gemini-security | | Google Gemini SDK security. | | eslint-plugin-jwt-security | | Token security. | | eslint-plugin-knex-security | | Knex security. | | eslint-plugin-lambda-security | | AWS Lambda hardening. | | eslint-plugin-mcp-sdk-security | | MCP SDK security. | | eslint-plugin-mongodb-security | | MongoDB injection. | | eslint-plugin-mysql-security | | MySQL security. | | eslint-plugin-nestjs-security | | NestJS framework hardening. | | eslint-plugin-node-security | | Server-side patterns. | | eslint-plugin-openai-security | | OpenAI SDK security. | | eslint-plugin-postgresql-security | | PostgreSQL security. | | eslint-plugin-prisma-security | | Prisma security. | | eslint-plugin-secure-coding | | Injection prevention. | | eslint-plugin-sequelize-security | | Sequelize ORM security. | | eslint-plugin-sqlite-security | | SQLite security. | | eslint-plugin-typeorm-security | | TypeORM security. | | eslint-plugin-vercel-ai-security | | AI SDK 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