Issue guide
Empty buttons
Icon-only buttons need visible text or `aria-label`.
Buttons with no accessible name cannot be understood by assistive tech—users do not know what will happen when they activate the control.
See this on your site
Run a scan, then match rule names in your report to the sections below.
At a glance
Instructional
No accessible name
Visible text names the control
Visible text, aria-label, or associated text can supply an accessible name.
Why this matters
- Icon-only controls are silent without text or aria-label.
- Custom components often forget to pass names through to the DOM.
Where this shows up
Use this list to spot the same pattern on your templates and key URLs.
Buttons and icons
- Close dialogs
- Hamburger menus
- Favorite and share icons
- Carousel arrows
Modals
- Dismiss controls in corners
Fix priority — address first
- Primary actions like submit, checkout, and delete.
- Any control that appears on every page in the header or cart.
Fix priority — can follow
- Decorative icons that are not interactive.
Who is affected
Screen reader users, keyboard-only users, and people who rely on clear errors and labels.
Fix this in your platform
Stack-specific steps, pitfalls, and verification. Core issues link under /wordpress, /shopify, /react, or /nextjs; all issues also have /fix/… URLs.
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”.
Examples (bad vs good)
Bad
`<button><svg>...</svg></button>` with no name.
Good
`<button aria-label="Close">` or inner text “Close”.
How to fix
- Locate buttons with empty names in the scan or accessibility tree.
- Add visible text or `aria-label` that states the outcome: “Close dialog”.
- For toggle buttons, reflect state with `aria-pressed` or similar when needed.
- Rescan the template URL.
Platform-specific notes
Where this often comes from on common stacks—and what to change.
- React
- Radix/shadcn primitives often expose label props—wire them in consistently.
- Shopify
- Quick-buy and cart icons in themes frequently ship unnamed.
Common mistakes
- Duplicating visible text inside aria-label incorrectly.
- Using `title` alone as the only hint (unreliable for many AT users).
How to verify the fix
- Tab to the button and check the accessible name.
- Activate with Enter/Space and confirm expected behavior.
- Rescan after updating the component library.
Related: 4.1.2 Name, Role, Value.
Related guides
Run another scan
After you ship a fix, rescan the same URL and keep both report links to compare.
Broader topics
Principles on these pages overlap with HTML issues: PDFs for documents and downloads, mobile for touch, contrast, and small screens.
Related issues
Next steps
Keep the scan, fix, rescan loop going
Ship a fix, then run another scan on the same URL. Each run gets its own report link so you can compare before and after.
Open scan