Shopify fix guide
Fix Empty buttons on Shopify
Icon-only buttons need visible text or `aria-label`.
This page ties the generic issue to how it usually shows up in Shopify 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 Shopify
Theme icons for cart, quick-buy, and mobile menu; some app blocks inject unnamed 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 Shopify
Quick-buy and cart icons in themes frequently ship unnamed.
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 Shopify
- Cart icon link styled as button without name.
- Drawer close control missing label.
- Editing checkout (limited) vs theme—know which surface you can change.
- Forgetting to test accelerated/mobile themes.
How to verify the fix
- Preview the theme or use a development theme URL the scanner can reach.
- Test cart and collection templates if that is where the issue appeared.
- Rerun the scan after theme deploy; keep before/after report URLs.
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.
- Shopify accessibility hub for more platform resources.
TestAccessibility · Shopify fix · localhost:3001