Skip to main content
interlace
Plugin: react-a11y

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-a11y

Live from GitHub

This content is fetched directly from README.md on GitHub and cached for 1 hour.

Live README from GitHubfrom eslint-plugin-react-a11y/README.md, cached for 1 hour.Edit on GitHub

⭐ 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

npm install eslint-plugin-react-a11y --save-dev

⚙️ Configuration Presets

PresetDescription
recommendedEnables critical accessibility rules (WCAG Level A as errors, AA as warnings)
strictEnforces all rules as errors for maximum WCAG compliance
wcag-aOnly rules required for WCAG 2.1 Level A compliance
wcag-aaIncludes 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

PackageVersion
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

IconDescription
💼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.
RuleCWEOWASPCVSSDescription🧠💼⚠️🔧💡🚫
alt-textCWE-252Enforce alt text on images and other visual elements that carry accessibility impact.🟢💼💡
anchor-ambiguous-textanchor-ambiguous-text rule🟢⚠️💡
anchor-has-contentanchor-has-content rule🟢💼💡
anchor-is-validanchor-is-valid rule🟢⚠️💡
aria-activedescendant-has-tabindexaria-activedescendant-has-tabindex rule🟢⚠️💡
aria-propsaria-props rule🟢💼💡
aria-rolearia-role rule🟢💼💡
aria-unsupported-elementsaria-unsupported-elements rule🟢💼💡
autocomplete-validautocomplete-valid rule🟢⚠️💡
click-events-have-key-eventsclick-events-have-key-events rule🟢💼💡
control-has-associated-labelcontrol-has-associated-label rule🟢⚠️💡
heading-has-contentheading-has-content rule🟢💼💡
html-has-langhtml-has-lang rule🟢💼💡
iframe-has-titleiframe-has-title rule🟢💼💡
img-redundant-altimg-redundant-alt rule🟢⚠️💡
interactive-supports-focusinteractive-supports-focus rule🟢💼💡
label-has-associated-controllabel-has-associated-control rule🟢⚠️💡
langlang rule🟢💼💡
media-has-captionmedia-has-caption rule🟢⚠️💡
mouse-events-have-key-eventsmouse-events-have-key-events rule🟢⚠️💡
no-access-keyno-access-key rule🟢⚠️💡
no-aria-hidden-on-focusableno-aria-hidden-on-focusable rule🟢💼💡
no-autofocusno-autofocus rule🟢⚠️💡
no-distracting-elementsno-distracting-elements rule🟢💼💡
no-interactive-element-to-noninteractive-roleno-interactive-element-to-noninteractive-role rule🟢⚠️💡
no-keyboard-inaccessible-elementsno-keyboard-inaccessible-elements rule🟢💼💡
no-missing-aria-labelsno-missing-aria-labels rule🟢⚠️💡
no-noninteractive-element-interactionsno-noninteractive-element-interactions rule🟢⚠️💡
no-noninteractive-element-to-interactive-roleno-noninteractive-element-to-interactive-role rule🟢⚠️💡
no-noninteractive-tabindexno-noninteractive-tabindex rule🟢⚠️💡
no-redundant-rolesno-redundant-roles rule🟢⚠️💡
no-static-element-interactionsno-static-element-interactions rule🟢⚠️💡
prefer-tag-over-roleprefer-tag-over-role rule🟢⚠️💡
role-has-required-aria-propsrole-has-required-aria-props rule🟢💼💡
role-supports-aria-propsrole-supports-aria-props rule🟢💼💡
scopescope rule🟢💼💡
tabindex-no-positivetabindex-no-positive rule🟢⚠️💡

Part of the Interlace ESLint ecosystem — AI-native rules with LLM-optimized error messages:

Security

PluginDownloadsDescription
eslint-plugin-anthropic-securitydownloadsAnthropic SDK security.
eslint-plugin-browser-securitydownloadsXSS, DOM security.
eslint-plugin-drizzle-securitydownloadsDrizzle security.
eslint-plugin-express-securitydownloadsExpress middleware hardening.
eslint-plugin-gemini-securitydownloadsGoogle Gemini SDK security.
eslint-plugin-jwt-securitydownloadsToken security.
eslint-plugin-knex-securitydownloadsKnex security.
eslint-plugin-lambda-securitydownloadsAWS Lambda hardening.
eslint-plugin-mcp-sdk-securitydownloadsMCP SDK security.
eslint-plugin-mongodb-securitydownloadsMongoDB injection.
eslint-plugin-mysql-securitydownloadsMySQL security.
eslint-plugin-nestjs-securitydownloadsNestJS framework hardening.
eslint-plugin-node-securitydownloadsServer-side patterns.
eslint-plugin-openai-securitydownloadsOpenAI SDK security.
eslint-plugin-postgresql-securitydownloadsPostgreSQL security.
eslint-plugin-prisma-securitydownloadsPrisma security.
eslint-plugin-secure-codingdownloadsInjection prevention.
eslint-plugin-sequelize-securitydownloadsSequelize ORM security.
eslint-plugin-sqlite-securitydownloadsSQLite security.
eslint-plugin-supabase-securitydownloadsSupabase security.
eslint-plugin-typeorm-securitydownloadsTypeORM security.
eslint-plugin-vercel-ai-securitydownloadsAI SDK security.

Code quality

PluginDownloadsDescription
eslint-plugin-conventionsdownloadsTeam-specific habits and styles.
eslint-plugin-import-nextdownloadsFast cycle + import-graph analysis.
eslint-plugin-maintainabilitydownloadsCognitive load and clean-code patterns.
eslint-plugin-modernizationdownloadsESNext migration + syntax evolution.
eslint-plugin-modularitydownloadsStructural integrity and DDD patterns.
eslint-plugin-operabilitydownloadsProduction readiness and resource health.
eslint-plugin-react-featuresdownloadsReact best practices and optimization.
eslint-plugin-reliabilitydownloadsRuntime 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.

GitHub stars

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