Accessibility (a11y) rules for React applications, enforcing WCAG standards.
> โญ If this plugin caught a real bug for you, [**star the repo**](https://github.com/ofri-peretz/eslint) โ 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](https://eslint.interlace.tools/docs/quality/plugin-react-a11y?utm_source=github&utm_medium=referral&utm_campaign=eslint-plugin-react-a11y), visit [eslint.interlace.tools](https://eslint.interlace.tools/?utm_source=github&utm_medium=referral&utm_campaign=eslint-plugin-react-a11y). ๐
- ่ฆๆฅ็ไธญๆ [ๆๅ](https://eslint.interlace.tools/docs/quality/plugin-react-a11y?utm_source=github&utm_medium=referral&utm_campaign=eslint-plugin-react-a11y), ่ฏท่ฎฟ้ฎ [eslint.interlace.tools](https://eslint.interlace.tools/?utm_source=github&utm_medium=referral&utm_campaign=eslint-plugin-react-a11y). ๐
- [๊ฐ์ด๋](https://eslint.interlace.tools/docs/quality/plugin-react-a11y?utm_source=github&utm_medium=referral&utm_campaign=eslint-plugin-react-a11y) ๋ฌธ์๋ [eslint.interlace.tools](https://eslint.interlace.tools/?utm_source=github&utm_medium=referral&utm_campaign=eslint-plugin-react-a11y)์์ ํ์ธํ์ค ์ ์์ต๋๋ค. ๐
- [ใฌใคใ](https://eslint.interlace.tools/docs/quality/plugin-react-a11y?utm_source=github&utm_medium=referral&utm_campaign=eslint-plugin-react-a11y)ใฏ [eslint.interlace.tools](https://eslint.interlace.tools/?utm_source=github&utm_medium=referral&utm_campaign=eslint-plugin-react-a11y)ใงใ็ขบ่ชใใ ใใใ ๐
- Para ver la [guรญa](https://eslint.interlace.tools/docs/quality/plugin-react-a11y?utm_source=github&utm_medium=referral&utm_campaign=eslint-plugin-react-a11y), visita [eslint.interlace.tools](https://eslint.interlace.tools/?utm_source=github&utm_medium=referral&utm_campaign=eslint-plugin-react-a11y). ๐
- ููุงุทูุงุน ุนูู [ุงูุฏููู](https://eslint.interlace.tools/docs/quality/plugin-react-a11y?utm_source=github&utm_medium=referral&utm_campaign=eslint-plugin-react-a11y)ุ ูู
ุจุฒูุงุฑุฉ [eslint.interlace.tools](https://eslint.interlace.tools/?utm_source=github&utm_medium=referral&utm_campaign=eslint-plugin-react-a11y). ๐
```bash
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
```javascript
// eslint.config.js
import reactA11y from 'eslint-plugin-react-a11y';
export default [reactA11y.configs.recommended];
```
### With TypeScript
```javascript
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
```javascript
import reactA11y from 'eslint-plugin-react-a11y';
export default [
reactA11y.configs['wcag-aa'],
{
// Additional customizations
},
];
```
### Custom Configuration
```javascript
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](../../docs/ESLINT_VERSION_SUPPORT.md) โ 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](https://eslint.interlace.tools/docs/quality/plugin-react-a11y/rules/alt-text?utm_source=github&utm_medium=referral&utm_campaign=eslint-plugin-react-a11y) | CWE-252 | | | Enforce alt text on images and other visual elements that carry accessibility impact. | ๐ข | ๐ผ | | | ๐ก | |
| [anchor-ambiguous-text](https://eslint.interlace.tools/docs/quality/plugin-react-a11y/rules/anchor-ambiguous-text?utm_source=github&utm_medium=referral&utm_campaign=eslint-plugin-react-a11y) | | | | anchor-ambiguous-text rule | ๐ข | | โ ๏ธ | | ๐ก | |
| [anchor-has-content](https://eslint.interlace.tools/docs/quality/plugin-react-a11y/rules/anchor-has-content?utm_source=github&utm_medium=referral&utm_campaign=eslint-plugin-react-a11y) | | | | anchor-has-content rule | ๐ข | ๐ผ | | | ๐ก | |
| [anchor-is-valid](https://eslint.interlace.tools/docs/quality/plugin-react-a11y/rules/anchor-is-valid?utm_source=github&utm_medium=referral&utm_campaign=eslint-plugin-react-a11y) | | | | anchor-is-valid rule | ๐ข | | โ ๏ธ | | ๐ก | |
| [aria-activedescendant-has-tabindex](https://eslint.interlace.tools/docs/quality/plugin-react-a11y/rules/aria-activedescendant-has-tabindex?utm_source=github&utm_medium=referral&utm_campaign=eslint-plugin-react-a11y) | | | | aria-activedescendant-has-tabindex rule | ๐ข | | โ ๏ธ | | ๐ก | |
| [aria-props](https://eslint.interlace.tools/docs/quality/plugin-react-a11y/rules/aria-props?utm_source=github&utm_medium=referral&utm_campaign=eslint-plugin-react-a11y) | | | | aria-props rule | ๐ข | ๐ผ | | | ๐ก | |
| [aria-role](https://eslint.interlace.tools/docs/quality/plugin-react-a11y/rules/aria-role?utm_source=github&utm_medium=referral&utm_campaign=eslint-plugin-react-a11y) | | | | aria-role rule | ๐ข | ๐ผ | | | ๐ก | |
| [aria-unsupported-elements](https://eslint.interlace.tools/docs/quality/plugin-react-a11y/rules/aria-unsupported-elements?utm_source=github&utm_medium=referral&utm_campaign=eslint-plugin-react-a11y) | | | | aria-unsupported-elements rule | ๐ข | ๐ผ | | | ๐ก | |
| [autocomplete-valid](https://eslint.interlace.tools/docs/quality/plugin-react-a11y/rules/autocomplete-valid?utm_source=github&utm_medium=referral&utm_campaign=eslint-plugin-react-a11y) | | | | autocomplete-valid rule | ๐ข | | โ ๏ธ | | ๐ก | |
| [click-events-have-key-events](https://eslint.interlace.tools/docs/quality/plugin-react-a11y/rules/click-events-have-key-events?utm_source=github&utm_medium=referral&utm_campaign=eslint-plugin-react-a11y) | | | | click-events-have-key-events rule | ๐ข | ๐ผ | | | ๐ก | |
| [control-has-associated-label](https://eslint.interlace.tools/docs/quality/plugin-react-a11y/rules/control-has-associated-label?utm_source=github&utm_medium=referral&utm_campaign=eslint-plugin-react-a11y) | | | | control-has-associated-label rule | ๐ข | | โ ๏ธ | | ๐ก | |
| [heading-has-content](https://eslint.interlace.tools/docs/quality/plugin-react-a11y/rules/heading-has-content?utm_source=github&utm_medium=referral&utm_campaign=eslint-plugin-react-a11y) | | | | heading-has-content rule | ๐ข | ๐ผ | | | ๐ก | |
| [html-has-lang](https://eslint.interlace.tools/docs/quality/plugin-react-a11y/rules/html-has-lang?utm_source=github&utm_medium=referral&utm_campaign=eslint-plugin-react-a11y) | | | | html-has-lang rule | ๐ข | ๐ผ | | | ๐ก | |
| [iframe-has-title](https://eslint.interlace.tools/docs/quality/plugin-react-a11y/rules/iframe-has-title?utm_source=github&utm_medium=referral&utm_campaign=eslint-plugin-react-a11y) | | | | iframe-has-title rule | ๐ข | ๐ผ | | | ๐ก | |
| [img-redundant-alt](https://eslint.interlace.tools/docs/quality/plugin-react-a11y/rules/img-redundant-alt?utm_source=github&utm_medium=referral&utm_campaign=eslint-plugin-react-a11y) | | | | img-redundant-alt rule | ๐ข | | โ ๏ธ | | ๐ก | |
| [interactive-supports-focus](https://eslint.interlace.tools/docs/quality/plugin-react-a11y/rules/interactive-supports-focus?utm_source=github&utm_medium=referral&utm_campaign=eslint-plugin-react-a11y) | | | | interactive-supports-focus rule | ๐ข | ๐ผ | | | ๐ก | |
| [label-has-associated-control](https://eslint.interlace.tools/docs/quality/plugin-react-a11y/rules/label-has-associated-control?utm_source=github&utm_medium=referral&utm_campaign=eslint-plugin-react-a11y) | | | | label-has-associated-control rule | ๐ข | | โ ๏ธ | | ๐ก | |
| [lang](https://eslint.interlace.tools/docs/quality/plugin-react-a11y/rules/lang?utm_source=github&utm_medium=referral&utm_campaign=eslint-plugin-react-a11y) | | | | lang rule | ๐ข | ๐ผ | | | ๐ก | |
| [media-has-caption](https://eslint.interlace.tools/docs/quality/plugin-react-a11y/rules/media-has-caption?utm_source=github&utm_medium=referral&utm_campaign=eslint-plugin-react-a11y) | | | | media-has-caption rule | ๐ข | | โ ๏ธ | | ๐ก | |
| [mouse-events-have-key-events](https://eslint.interlace.tools/docs/quality/plugin-react-a11y/rules/mouse-events-have-key-events?utm_source=github&utm_medium=referral&utm_campaign=eslint-plugin-react-a11y) | | | | mouse-events-have-key-events rule | ๐ข | | โ ๏ธ | | ๐ก | |
| [no-access-key](https://eslint.interlace.tools/docs/quality/plugin-react-a11y/rules/no-access-key?utm_source=github&utm_medium=referral&utm_campaign=eslint-plugin-react-a11y) | | | | no-access-key rule | ๐ข | | โ ๏ธ | | ๐ก | |
| [no-aria-hidden-on-focusable](https://eslint.interlace.tools/docs/quality/plugin-react-a11y/rules/no-aria-hidden-on-focusable?utm_source=github&utm_medium=referral&utm_campaign=eslint-plugin-react-a11y) | | | | no-aria-hidden-on-focusable rule | ๐ข | ๐ผ | | | ๐ก | |
| [no-autofocus](https://eslint.interlace.tools/docs/quality/plugin-react-a11y/rules/no-autofocus?utm_source=github&utm_medium=referral&utm_campaign=eslint-plugin-react-a11y) | | | | no-autofocus rule | ๐ข | | โ ๏ธ | | ๐ก | |
| [no-distracting-elements](https://eslint.interlace.tools/docs/quality/plugin-react-a11y/rules/no-distracting-elements?utm_source=github&utm_medium=referral&utm_campaign=eslint-plugin-react-a11y) | | | | no-distracting-elements rule | ๐ข | ๐ผ | | | ๐ก | |
| [no-interactive-element-to-noninteractive-role](https://eslint.interlace.tools/docs/quality/plugin-react-a11y/rules/no-interactive-element-to-noninteractive-role?utm_source=github&utm_medium=referral&utm_campaign=eslint-plugin-react-a11y) | | | | no-interactive-element-to-noninteractive-role rule | ๐ข | | โ ๏ธ | | ๐ก | |
| [no-keyboard-inaccessible-elements](https://eslint.interlace.tools/docs/quality/plugin-react-a11y/rules/no-keyboard-inaccessible-elements?utm_source=github&utm_medium=referral&utm_campaign=eslint-plugin-react-a11y) | | | | no-keyboard-inaccessible-elements rule | ๐ข | ๐ผ | | | ๐ก | |
| [no-missing-aria-labels](https://eslint.interlace.tools/docs/quality/plugin-react-a11y/rules/no-missing-aria-labels?utm_source=github&utm_medium=referral&utm_campaign=eslint-plugin-react-a11y) | | | | no-missing-aria-labels rule | ๐ข | | โ ๏ธ | | ๐ก | |
| [no-noninteractive-element-interactions](https://eslint.interlace.tools/docs/quality/plugin-react-a11y/rules/no-noninteractive-element-interactions?utm_source=github&utm_medium=referral&utm_campaign=eslint-plugin-react-a11y) | | | | no-noninteractive-element-interactions rule | ๐ข | | โ ๏ธ | | ๐ก | |
| [no-noninteractive-element-to-interactive-role](https://eslint.interlace.tools/docs/quality/plugin-react-a11y/rules/no-noninteractive-element-to-interactive-role?utm_source=github&utm_medium=referral&utm_campaign=eslint-plugin-react-a11y) | | | | no-noninteractive-element-to-interactive-role rule | ๐ข | | โ ๏ธ | | ๐ก | |
| [no-noninteractive-tabindex](https://eslint.interlace.tools/docs/quality/plugin-react-a11y/rules/no-noninteractive-tabindex?utm_source=github&utm_medium=referral&utm_campaign=eslint-plugin-react-a11y) | | | | no-noninteractive-tabindex rule | ๐ข | | โ ๏ธ | | ๐ก | |
| [no-redundant-roles](https://eslint.interlace.tools/docs/quality/plugin-react-a11y/rules/no-redundant-roles?utm_source=github&utm_medium=referral&utm_campaign=eslint-plugin-react-a11y) | | | | no-redundant-roles rule | ๐ข | | โ ๏ธ | | ๐ก | |
| [no-static-element-interactions](https://eslint.interlace.tools/docs/quality/plugin-react-a11y/rules/no-static-element-interactions?utm_source=github&utm_medium=referral&utm_campaign=eslint-plugin-react-a11y) | | | | no-static-element-interactions rule | ๐ข | | โ ๏ธ | | ๐ก | |
| [prefer-tag-over-role](https://eslint.interlace.tools/docs/quality/plugin-react-a11y/rules/prefer-tag-over-role?utm_source=github&utm_medium=referral&utm_campaign=eslint-plugin-react-a11y) | | | | prefer-tag-over-role rule | ๐ข | | โ ๏ธ | | ๐ก | |
| [role-has-required-aria-props](https://eslint.interlace.tools/docs/quality/plugin-react-a11y/rules/role-has-required-aria-props?utm_source=github&utm_medium=referral&utm_campaign=eslint-plugin-react-a11y) | | | | role-has-required-aria-props rule | ๐ข | ๐ผ | | | ๐ก | |
| [role-supports-aria-props](https://eslint.interlace.tools/docs/quality/plugin-react-a11y/rules/role-supports-aria-props?utm_source=github&utm_medium=referral&utm_campaign=eslint-plugin-react-a11y) | | | | role-supports-aria-props rule | ๐ข | ๐ผ | | | ๐ก | |
| [scope](https://eslint.interlace.tools/docs/quality/plugin-react-a11y/rules/scope?utm_source=github&utm_medium=referral&utm_campaign=eslint-plugin-react-a11y) | | | | scope rule | ๐ข | ๐ผ | | | ๐ก | |
| [tabindex-no-positive](https://eslint.interlace.tools/docs/quality/plugin-react-a11y/rules/tabindex-no-positive?utm_source=github&utm_medium=referral&utm_campaign=eslint-plugin-react-a11y) | | | | 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`](https://www.npmjs.com/package/eslint-plugin-secure-coding) | [](https://www.npmjs.com/package/eslint-plugin-secure-coding) | General security rules & OWASP guidelines. |
| [`eslint-plugin-pg`](https://www.npmjs.com/package/eslint-plugin-pg) | [](https://www.npmjs.com/package/eslint-plugin-pg) | PostgreSQL security & best practices. |
| [`eslint-plugin-node-security`](https://www.npmjs.com/package/eslint-plugin-node-security) | [](https://www.npmjs.com/package/eslint-plugin-node-security) | Node.js core-module security (fs, child_process, vm, crypto, Buffer). |
| [`eslint-plugin-jwt`](https://www.npmjs.com/package/eslint-plugin-jwt) | [](https://www.npmjs.com/package/eslint-plugin-jwt) | JWT security & best practices. |
| [`eslint-plugin-browser-security`](https://www.npmjs.com/package/eslint-plugin-browser-security) | [](https://www.npmjs.com/package/eslint-plugin-browser-security) | Browser-specific security & XSS prevention. |
| [`eslint-plugin-express-security`](https://www.npmjs.com/package/eslint-plugin-express-security) | [](https://www.npmjs.com/package/eslint-plugin-express-security) | Express.js security hardening rules. |
| [`eslint-plugin-lambda-security`](https://www.npmjs.com/package/eslint-plugin-lambda-security) | [](https://www.npmjs.com/package/eslint-plugin-lambda-security) | AWS Lambda security best practices. |
| [`eslint-plugin-nestjs-security`](https://www.npmjs.com/package/eslint-plugin-nestjs-security) | [](https://www.npmjs.com/package/eslint-plugin-nestjs-security) | NestJS security rules & patterns. |
| [`eslint-plugin-mongodb-security`](https://www.npmjs.com/package/eslint-plugin-mongodb-security) | [](https://www.npmjs.com/package/eslint-plugin-mongodb-security) | MongoDB security best practices. |
| [`eslint-plugin-vercel-ai-security`](https://www.npmjs.com/package/eslint-plugin-vercel-ai-security) | [](https://www.npmjs.com/package/eslint-plugin-vercel-ai-security) | Vercel AI SDK security hardening. |
| [`eslint-plugin-import-next`](https://www.npmjs.com/package/eslint-plugin-import-next) | [](https://www.npmjs.com/package/eslint-plugin-import-next) | Next-gen import sorting & architecture. |
## โญ Support & follow
If this plugin caught a real bug for you, **[star the repo](https://github.com/ofri-peretz/eslint)** โ stars are the signal that keeps the Interlace ESLint ecosystem maintained โ and **[follow the writeups on Dev.to](https://dev.to/ofri-peretz)** for the benchmarks and security research behind these rules.
[](https://github.com/ofri-peretz/eslint)
## ๐ License
MIT ยฉ [Ofri Peretz](https://github.com/ofri-peretz)
