Overview

Live from GitHub

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

Accessibility Compliance

Ensure your React applications meet WCAG accessibility standards.

Rules (37)

Browse all available accessibility rules

Changelog

View version history and updates

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

Accessibility (a11y) rules for React applications, enforcing WCAG standards.

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

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	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	🟢		⚠️	💡

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

View README.md on GitHub →