React fix guide
Fix Empty buttons on React
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 React
Radix/shadcn primitives often expose label props—wire them in consistently.
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.
Code example
<button type="button" aria-label="Close dialog"> <CloseIcon aria-hidden /> </button>
Related: 4.1.2 Name, Role, Value.
Other platforms
TestAccessibility · Programmatic fix page · localhost:3001