React and Next.js accessibility hub
Client boundaries, design systems, and `next/image` all show up in automated scans. This hub links generic issues to React-specific and Next.js-specific fix URLs, then back to a rescan.
Scan your deployed or staging URL
Production builds behave differently from dev—scan what users get.
Common issues in React and Next.js apps
- Icon-only buttons and custom components missing accessible names.
- Modals and drawers without focus management.
- Images and SVGs without meaningful alternatives.
- Hydration changing roles or labels between server and client HTML.
How to approach fixes
- Trace the failing node to a component—fix the primitive, not only one page.
- Prefer native elements; add keyboard support when you cannot.
- Verify with a production build and the accessibility tree.
Fix pages: React
- React: Missing form labels/react/missing-form-label
- React: Empty buttons/react/empty-button
- React: Low color contrast/react/low-contrast
- React: Missing alternative text on images/react/missing-alt-text
- React: Keyboard traps/react/keyboard-trap
- React: Heading structure problems/react/missing-heading-structure
Fix pages: Next.js
- Next.js: Missing form labels/nextjs/missing-form-label
- Next.js: Empty buttons/nextjs/empty-button
- Next.js: Low color contrast/nextjs/low-contrast
- Next.js: Missing alternative text on images/nextjs/missing-alt-text
- Next.js: Keyboard traps/nextjs/keyboard-trap
- Next.js: Heading structure problems/nextjs/missing-heading-structure
Recommended workflow
- Scan a route that reproduces the issue.
- Open the issue guide, then the React or Next.js fix page.
- Ship the component fix; deploy.
- Rescan the same URL.