Plugin: react-a11y
Overview
React accessibility rules for WCAG compliance.
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.
Accessibility (a11y) rules for React applications, enforcing WCAG standards.
Description
This plugin provides Accessibility (a11y) rules for React applications, enforcing WCAG standards. By using this plugin, you can proactively identify and mitigate security risks across your entire codebase.
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-devQuick Start
// eslint.config.js
import reactA11y from 'eslint-plugin-react-a11y';
export default [reactA11y.configs.recommended];โ๏ธ 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'],
},
],
},
},
];Rules
Legend
| Icon | Description |
|---|---|
| ๐ผ | Recommended: Included in the recommended preset. |
| โ ๏ธ | Warns: Set towarn in recommended preset. |
| ๐ง | Auto-fixable: Automatically fixable by the --fix CLI option. |
| ๐ก | Suggestions: Providing code suggestions in IDE. |
| ๐ซ | Deprecated: This rule is deprecated. |
| Rule | CWE | OWASP | CVSS | Description | ๐ผ | โ ๏ธ | ๐ง | ๐ก | ๐ซ |
|---|---|---|---|---|---|---|---|---|---|
| alt-text | Enforce alt text | ||||||||
| anchor-ambiguous-text | Enforce anchor ambiguous text | ||||||||
| anchor-has-content | Enforce anchor has content | ||||||||
| anchor-is-valid | Enforce anchor is valid | ||||||||
| aria-activedescendant-has-tabindex | Enforce aria activedescendant has tabindex | ||||||||
| aria-props | Enforce aria props | ||||||||
| aria-role | Enforce aria role | ||||||||
| aria-unsupported-elements | Enforce aria unsupported elements | ||||||||
| autocomplete-valid | Enforce autocomplete valid | ||||||||
| click-events-have-key-events | Enforce click events have key events | ||||||||
| control-has-associated-label | Enforce control has associated label | ||||||||
| heading-has-content | Enforce heading has content | ||||||||
| html-has-lang | Enforce html has lang | ||||||||
| iframe-has-title | Enforce iframe has title | ||||||||
| img-redundant-alt | Enforce img redundant alt | ||||||||
| interactive-supports-focus | Enforce interactive supports focus | ||||||||
| label-has-associated-control | Enforce label has associated control | ||||||||
| lang | Enforce lang | ||||||||
| media-has-caption | Enforce media has caption | ||||||||
| mouse-events-have-key-events | Enforce mouse events have key events | ||||||||
| no-access-key | Enforce no access key | ||||||||
| no-aria-hidden-on-focusable | Enforce no aria hidden on focusable | ||||||||
| no-autofocus | Enforce no autofocus | ||||||||
| no-distracting-elements | Enforce no distracting elements | ||||||||
| no-interactive-element-to-noninteractive-role | Enforce no interactive element to noninteractive role | ||||||||
| no-keyboard-inaccessible-elements | Enforce no keyboard inaccessible elements | ||||||||
| no-missing-aria-labels | Enforce no missing aria labels | ||||||||
| no-noninteractive-element-interactions | Enforce no noninteractive element interactions | ||||||||
| no-noninteractive-element-to-interactive-role | Enforce no noninteractive element to interactive role | ||||||||
| no-noninteractive-tabindex | Enforce no noninteractive tabindex | ||||||||
| no-redundant-roles | Enforce no redundant roles | ||||||||
| no-static-element-interactions | Enforce no static element interactions | ||||||||
| prefer-tag-over-role | Enforce prefer tag over role | ||||||||
| role-has-required-aria-props | Enforce role has required aria props | ||||||||
| role-supports-aria-props | Enforce role supports aria props | ||||||||
| scope | Enforce scope | ||||||||
| tabindex-no-positive | Enforce tabindex no positive |
๐ 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-crypto | NodeJS Cryptography security rules. | |
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. |
๐ License
MIT ยฉ Ofri Peretz
View README.md on GitHub โ