A React-based HTML reporter that integrates with 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.
- 📊 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
Follow the steps below to install the required packages and use React Axe Reporter in a Next.js application:
-
Install dependencies
Installreact-axe-reporteralong withaxe-coreto enable accessibility checks and generate data for visual reports dynamically:npm install react-axe-reporter axe-core --save # or yarn add react-axe-reporter axe-core -
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:// 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<axe.AxeResults | null>(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 <p>Running accessibility scan...</p>; return ( <> <AxeReport data={report} info1={'Tested on: ' + window.opener.location.href} info2={'Date: ' + new Date().toLocaleDateString()} /> </> ); }
-
Add the component to a page
Render theAxeCheckercomponent in a separate page, for example,axe-report.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 ( <> <Head> <title>Axe Report</title> <meta name="description" content="Axe Report" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="icon" href="/favicon.ico" /> </Head> <AxeChecker /> </> ); }
-
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:// 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 ( <> <Head> {/* ... */} </Head> <button onClick={openAxeReport}>Run Axe Validation</button> </> ); }
The component uses CSS modules for styling. You can customize the appearance by overriding the CSS classes in your own stylesheet.
Contributions are welcome! Please feel free to submit a pull request.
This project is licensed under the MIT License. See the LICENSE file for details.
- axe-core for the accessibility testing engine
- Original axe-html-reporter for inspiration