react-a11y-doctor 🩺

Automated Accessibility Fixes for React & Next.js Projects

react-a11y-doctor scans React source (.js/.jsx/.ts/.tsx) and built output HTML and automatically fixes common accessibility problems, instead of just reporting them.

✨ Features

| Fix | Example | |------|---------| | Missing alt text | <img src="foo.png"> → <img src="foo.png" alt="foo"> | | Missing aria-label | <button><Icon/></button> → aria-label="delete" | | Clickable divs | <div onClick> → role="button" tabIndex="0" aria-label="Open" | | Missing <svg><title> | Adds <title> intelligently | | Heading order warnings | Detects jumps (ex: h1 → h4) |

🧪 Example

Before

<button><DeleteIcon /></button>
<img src="/img/user.png" />
<div onClick={open}>Edit</div>

After

<button aria-label="delete"><DeleteIcon /></button>
<img src="/img/user.png" alt="user" />
<div onClick={open} role="button" tabIndex="0" aria-label="Edit">Edit</div>

Formatted with Prettier automatically.

🚀 Install

npm install react-a11y-doctor --save-dev

🔧 Commands

| Command | Description | |------|---------| | react-a11y-doctor fix src | Fix JSX/TSX files inside src | | react-a11y-doctor auto | Detect and fix source + built HTML automatically |

🏗 Build integration

Next.js

"scripts": {
  "build": "react-a11y-doctor fix src && next build && react-a11y-doctor auto"
}

Vite / CRA / Astro / Remix

"build": "react-a11y-doctor fix src && vite build && react-a11y-doctor auto"

🧂 Supports

• React 18 / 19
• Next.js (App & Pages router)
• Vite / CRA / Remix / Astro
• TypeScript + JSX

📝 License

Apache-2.0

👤 Author

Santhoshkumar Ragunathan

LinkedIn | GitHub | Portfolio

Developed in 🇮🇳 with ❤️

Feel free to contribute!