JSPM – eslint-plugin-react-a11y@2.1.5

Package Exports

eslint-plugin-react-a11y
eslint-plugin-react-a11y/types

Readme

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

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.