Next.js fix guide
Fix Empty buttons on Next.js
Icon-only buttons need visible text or `aria-label`.
Check your live page
Canonical issue page: Empty buttons →
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.
Related: 4.1.2 Name, Role, Value.
Other platforms
TestAccessibility · Programmatic fix page · localhost:3001