Next.js fix guide
Fix Empty buttons on Next.js
Icon-only buttons need visible text or `aria-label`.
This page ties the generic issue to how it usually shows up in Next.js markup and tooling, then walks you through a fix and verification loop.
Verify on a live URL
Scan, fix, deploy, then rescan the same address to compare reports.
Main issue guide: Empty buttons →
At a glance
Instructional
No accessible name
Visible text names the control
Visible text, aria-label, or associated text can supply an accessible name.
Where this comes from on Next.js
Same as React; check client islands and shared UI kits (Radix, shadcn) for missing `aria-label`.
What this issue means
Causes
Designers remove visible text assuming icons are universal. SVG or `<img>` icons without alt contribute empty names.
Fixes
Add visually hidden text or `aria-label` that matches the action: “Close dialog”, “Submit order”.
How to fix on Next.js
In Next.js, verify both server and client components: hydration can change roles/names. Use `next/image` with meaningful `alt`, and ensure dynamic imports do not drop focus management.
How to fix
Add visible text or aria-label that states the action: “Close dialog”, “Add to favorites”.
Ensure disabled state is communicated to assistive tech, not only styled gray.
Common mistakes on Next.js
- Third-party widgets loaded only on client with empty initial markup.
- Assuming dev overlay errors match production a11y tree.
- Ignoring dynamic imports that shift structure.
How to verify the fix
- Test the production build (focus and hydration differ from dev).
- Verify both mobile and desktop layouts if they diverge.
- Rerun the scan; compare rule counts on the same path.
Related: 4.1.2 Name, Role, Value.
Same issue on other platforms
Related issues
Guides
Next steps
- Run a scan on staging or production.
- Re-read the main issue page for context and WCAG notes.
- React and Next.js accessibility hub for more platform resources.
TestAccessibility · Next.js fix · localhost:3001