JSPM

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

Description

This plugin ensures your React applications are accessible to all users by strictly enforcing WCAG standards. It automatically detects common accessibility issues in your JSX, such as missing alt text or improper aria labels, and guides you toward compliant solutions. Implementing these rules helps you build inclusive web experiences that meet modern accessibility requirements.

Philosophy

Interlace fosters strength through integration. We interlace accessibility directly into your workflow, creating inclusive applications by design. Tools should guide rather than gatekeep, providing educational feedback that strengthens developers.

Why an independent ecosystem? 🚀 Ship fast without upstream bureaucracy • 🤖 AI-optimized messages (WCAG, severity, fixes) • ⚡ Unified codebase for performance • 🏗️ Consistent patterns across all plugins • 📚 Educational "why" explanations

All rules are clean-room implementations following eslint-plugin-jsx-a11y naming conventions — familiar API, better engineering.

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

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

AI-Optimized Messages

This plugin is optimized for ESLint's Model Context Protocol (MCP), enabling AI assistants like Cursor, GitHub Copilot, and Claude to:

• Understand the exact vulnerability type via CWE references
• Apply the correct fix using structured guidance
• Provide educational context to developers

src/components/Button.tsx
  12:5   error  🔒 CWE-20 WCAG:4.1.2 CVSS:5.3 | Interactive element missing accessible name | CRITICAL [WCAG 2.1 A]
                    Fix: Add aria-label="Submit Order" or inner text | https://eslint.interlace.tools/...

// .cursor/mcp.json
{
  "mcpServers": {
    "eslint": {
      "command": "npx",
      "args": ["@eslint/mcp@latest"]
    }
  }
}

By providing this structured context (CWE, OWASP, Fix), we enable AI tools to reason about the security flaw rather than hallucinating. This allows Copilot/Cursor to suggest the exact correct fix immediately.

🔗 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-import-next		Next-gen import sorting & architecture.

📄 License

MIT © Ofri Peretz