react-a11y-inspector
Version:
An advanced React accessibility inspection tool with real-time monitoring, screen reader simulation, and customizable rules.
179 lines (124 loc) • 4.42 kB
Markdown
# **`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**
```bash
# Using npm
npm install react-a11y-inspector
# Using yarn
yarn add react-a11y-inspector
```
## **Usage**
### **Basic Example**
```javascript
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**
```javascript
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:
```javascript
<button onClick={() => exportPDF(issues)}>Download Report</button>
```
## **Screen Reader Simulation**
Simulate screen reader output for detected accessibility issues:
```javascript
<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**:
```bash
git clone https://github.com/your-repo/react-a11y-inspector.git
cd react-a11y-inspector
npm install
```
2. **Run Tests**:
```bash
npm run test
```
3. **Build the Package**:
```bash
npm run build
```
4. **Submit Pull Requests**:
- Create a feature branch
- Submit a PR with detailed descriptions
## **License**
Licensed under the [MIT License](LICENSE).