react-a11y-inspector

Accessibility Inspection Tool for React

react-a11y-inspector is a powerful React accessibility inspection tool based on WCAG standards. It helps developers detect and resolve common accessibility issues in React applications. Key features include custom rule validation, real-time monitoring, screen reader simulation, and downloadable reports in PDF/CSV formats.

Installation

# Using npm
npm install react-a11y-inspector

# Using yarn
yarn add react-a11y-inspector

Usage

Basic Example

import React from 'react';
import A11yInspector from 'react-a11y-inspector';

function App() {
  return (
    <div>
      <h1>My Accessible React App</h1>
      <A11yInspector enabled={true} />
    </div>
  );
}

export default App;

Advanced Example with Custom Rules

import React from 'react';
import A11yInspector from 'react-a11y-inspector';

const customRules = [
  {
    name: 'Custom Button Check',
    selector: 'button',
    check: (el) => el.innerText.trim().length > 0,
    message: 'Buttons must have descriptive labels.',
    severity: 'Warning',
  },
];

function App() {
  return (
    <div>
      <h1>Accessible App with Custom Rules</h1>
      <button></button>
      <A11yInspector
        enabled={true}
        customRules={customRules}
        reportSeverity="Warning"
        enableRealTimeMonitoring={true}
      />
    </div>
  );
}

export default App;

Features

• ✅ Accessibility Checks: Detects common a11y issues (ARIA roles, form labels, and color contrast).
• ✅ Custom Rule Support: Create and validate custom rules.
• ✅ Severity Filtering: Filters issues by severity (Info, Warning, Critical).
• ✅ Screen Reader Simulation: Simulates how screen readers interpret issues.
• ✅ Real-Time Monitoring: Rechecks the DOM on updates.
• ✅ Report Export: Generates PDF/CSV reports for accessibility issues.

Props Reference

| Prop | Type | Default | Description | |---------------------------|---------------------|-------------|--------------------------------------| | enabled | boolean | true | Enables/disables the inspector. | | customRules | array | [] | Custom a11y validation rules. | | reportSeverity | string | "Warning"| Minimum severity to display. | | enableRealTimeMonitoring| boolean | false | Monitors DOM changes in real-time. |

Accessibility Checks

• ARIA Role Checks: Ensures valid ARIA roles are used.
• Form Label Checks: Verifies that form elements have labels.
• Contrast Ratio Checks: Detects low contrast between foreground and background colors.
• Custom Rules: Supports project-specific validation logic.

Report Generation

Accessibility reports can be generated in PDF or CSV format:

<button onClick={() => exportPDF(issues)}>Download Report</button>

Screen Reader Simulation

Simulate screen reader output for detected accessibility issues:

<button onClick={() => simulateScreenReader(issues)}>Simulate Screen Reader</button>

Changelog

[1.0.0] - YYYY-MM-DD

Added

• Initial release of react-a11y-inspector.
• WCAG-based accessibility checks (ARIA roles, form labels, and color contrast).
• Custom rule support.
• Severity filtering (Info, Warning, Critical).
• Real-time monitoring.
• PDF/CSV report generation.
• Screen reader simulation.

Contribution Guide

1. Clone Repository:

git clone https://github.com/your-repo/react-a11y-inspector.git
cd react-a11y-inspector
npm install

2. Run Tests:

npm run test

3. Build the Package:

npm run build

4. Submit Pull Requests:

• Create a feature branch
• Submit a PR with detailed descriptions

License

Licensed under the MIT License.