⭐ 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.

Philosophy

Interlace fosters strength through integration. Instead of stacking isolated rules, we interlace security directly into your workflow to create a resilient fabric of code. We believe tools should guide rather than gatekeep, providing educational feedback that strengthens the developer with every interaction.

Getting Started

• To check out the guide, visit eslint.interlace.tools. 📚
• 要查看中文 指南, 请访问 eslint.interlace.tools. 📚
• 가이드 문서는 eslint.interlace.tools에서 확인하실 수 있습니다. 📚
• ガイドは eslint.interlace.toolsでご確認ください。 📚
• Para ver la guía, visita eslint.interlace.tools. 📚
• للاطلاع على الدليل، قم بزيارة 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.0.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 security plugins with LLM-optimized error messages:

| Plugin | Downloads | Description | | :--- | :---: | :--- | | eslint-plugin-secure-coding | | General security rules & OWASP guidelines. | | eslint-plugin-pg | | PostgreSQL security & best practices. | | eslint-plugin-node-security | | Node.js core-module security (fs, child_process, vm, crypto, Buffer). | | eslint-plugin-jwt | | JWT security & best practices. | | eslint-plugin-browser-security | | Browser-specific security & XSS prevention. | | eslint-plugin-express-security | | Express.js security hardening rules. | | eslint-plugin-lambda-security | | AWS Lambda security best practices. | | eslint-plugin-nestjs-security | | NestJS security rules & patterns. | | eslint-plugin-mongodb-security | | MongoDB security best practices. | | eslint-plugin-vercel-ai-security | | Vercel AI SDK security hardening. | | eslint-plugin-import-next | | Next-gen import sorting & architecture. |

⭐ 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