https://github.com/surveyjs/react-axe-reporter
React Axe Reporter is a UI component that displays accessibility testing results from axe-core, a popular tool for auditing web accessibility. It provides an interactive and visually appealing UI to help developers validate WCAG compliance in SurveyJS forms.
https://github.com/surveyjs/react-axe-reporter
accessibility-checker axe html react tool
Last synced: about 2 months ago
JSON representation
React Axe Reporter is a UI component that displays accessibility testing results from axe-core, a popular tool for auditing web accessibility. It provides an interactive and visually appealing UI to help developers validate WCAG compliance in SurveyJS forms.
- Host: GitHub
- URL: https://github.com/surveyjs/react-axe-reporter
- Owner: surveyjs
- License: mit
- Created: 2025-04-15T14:39:41.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-08-04T12:23:03.000Z (11 months ago)
- Last Synced: 2026-04-25T12:36:03.500Z (about 2 months ago)
- Topics: accessibility-checker, axe, html, react, tool
- Language: JavaScript
- Homepage: https://surveyjs.github.io/react-axe-reporter/example/
- Size: 786 KB
- Stars: 13
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Axe HTML Reporter
A React-based HTML reporter that integrates with [axe-core](https://github.com/dequelabs/axe-core) accessibility checker to report any web accessibility issues that might make it hard for people with disabilities to use your application. It provides an interactive and visually appealing UI that displays accessibility testing results as a list of passed and failed accessibility checks, along with detailed information about each issue.
Developed by the SurveyJS team, this Axe reporter is designed to make it easier for developers to interpret accessibility test results for dynamic forms built with the Survey Creator component and validate their WCAG compliance.
[Live Demo](https://surveyjs.github.io/react-axe-reporter/example/)
## Features
- 📊 Visual percentage gauge showing overall accessibility score
- 📋 Summary table of accessibility violations
- 🔍 Detailed view of each accessibility rule check
- 📑 Collapsible sections for passed and failed checks
- 🏷️ WCAG tag formatting and categorization
- 📱 Responsive design
- 🎨 Customizable styling through CSS modules
## Installation and Usage
Follow the steps below to install the required packages and use React Axe Reporter in a Next.js application:
1. **Install dependencies**\
Install `react-axe-reporter` along with `axe-core` to enable accessibility checks and generate data for visual reports dynamically:
```bash
npm install react-axe-reporter axe-core --save
# or
yarn add react-axe-reporter axe-core
```
2. **Create a client component for accessibility checks**\
Create a client-side component that receives HTML content and runs Axe accessibility validation. For example, `AxeChecker.tsx`:
```tsx
// src/components/AxeChecker.tsx
'use client';
import AxeReport from 'react-axe-reporter';
import 'react-axe-reporter/style.css';
import axe from 'axe-core';
import { useEffect, useState } from 'react';
export default function AxeChecker() {
const [report, setReport] = useState(null);
useEffect(() => {
// Notify the opener window that the AxeChecker is ready to receive HTML
if (window.opener) {
window.opener.postMessage('ready-for-html', '*');
}
// Listen for HTML content and run Axe checks on it
const handler = (event: MessageEvent) => {
if (event.data?.type === 'AXE_HTML') {
const parser = new DOMParser();
const doc = parser.parseFromString(event.data.html, 'text/html');
axe.run(doc, {}, (err, results) => {
if (err) {
console.error('axe error:', err);
return;
}
setReport(results);
});
}
};
window.addEventListener('message', handler);
return () => window.removeEventListener('message', handler);
}, []);
if (!report) return
Running accessibility scan...
;
return (
<>
>
);
}
```
3. **Add the component to a page**\
Render the `AxeChecker` component in a separate page, for example, `axe-report.tsx`:
```tsx
// src/pages/axe-report.tsx
import Head from "next/head";
import dynamic from 'next/dynamic';
const AxeChecker = dynamic(() => import("@/components/AxeChecker"), { ssr: false });
export default function AxeReport() {
return (
<>
Axe Report
>
);
}
```
4. **Trigger the Axe validation from another page**\
Use the following code to open the Axe report page and send the current page's HTML content to it:
```tsx
// src/components/index.tsx
import Head from "next/head";
export default function Home() {
const openAxeReport = () => {
const html = document.documentElement.outerHTML;
const win = window.open('/axe-report', '_blank');
const sendWhenReady = (e: MessageEvent) => {
if (e.data === 'ready-for-html') {
win?.postMessage({ type: 'AXE_HTML', html }, '*');
window.removeEventListener('message', sendWhenReady);
}
};
window.addEventListener('message', sendWhenReady);
};
return (
<>
{/* ... */}
Run Axe Validation
>
);
}
```
## Styling
The component [uses CSS modules](./src/styles/) for styling. You can customize the appearance by overriding the CSS classes in your own stylesheet.
## Contributing
Contributions are welcome! Please feel free to submit a pull request.
## License
This project is licensed under the MIT License. See the [LICENSE](./LICENSE) file for details.
## Acknowledgments
- [axe-core](https://github.com/dequelabs/axe-core) for the accessibility testing engine
- [Original axe-html-reporter](https://github.com/lpelypenko/axe-html-reporter) for inspiration