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

Quick 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