Common Accessibility Issues
These are the accessibility issues we find most often on Shopify stores. Understanding them helps you fix issues faster and prevent future problems.
Missing Image Alt Text
Images without alt text are invisible to screen reader users. Product images, banners, and icons all need descriptive text.
❌ Incorrect
<img src="product.jpg"> ✓ Correct
<img src="product.jpg" alt="Blue cotton t-shirt, front view"> Shopify fix: Edit products in Admin → Add alt text to images, or update your theme's Liquid templates.
Insufficient Color Contrast
Text that doesn't have enough contrast with its background is hard to read for users with low vision. WCAG requires 4.5:1 for normal text, 3:1 for large text.
❌ Low contrast (2.5:1)
Light gray on light gray
✓ Good contrast (7:1)
Dark gray on white
Shopify fix: Update your theme's color settings in Theme Customizer, or modify CSS in theme.css.
Missing Form Labels
Form inputs without labels leave screen reader users guessing what information is being requested. Newsletter signups, contact forms, and checkout fields all need labels.
❌ Incorrect
<input type="email" placeholder="Email"> ✓ Correct
<label for="email">Email</label>
<input id="email" type="email"> Shopify fix: Update Liquid templates to add proper <label> elements to all form inputs.
Invisible Keyboard Focus
Users who navigate with keyboards need to see where they are on the page. Many themes remove the default focus outline, making navigation impossible.
❌ Incorrect
*:focus { outline: none; } ✓ Correct
*:focus { outline: 2px solid #0ea5e9; } Shopify fix: Add visible focus styles to your theme's CSS. Use :focus-visible for modern browsers.
Empty Links and Buttons
Icon-only buttons and links with no text are announced as empty or by their URL, which is meaningless. Social icons, cart buttons, and navigation icons are common offenders.
❌ Incorrect
<a href="/cart"><svg>...</svg></a> ✓ Correct
<a href="/cart" aria-label="View cart"><svg>...</svg></a> Shopify fix: Add aria-label attributes to icon-only interactive elements.
Other Common Issues
| Issue | WCAG | Quick Fix |
|---|---|---|
| Missing page language | 3.1.1 | Add lang="en" to <html> |
| Skipped heading levels | 1.3.1 | Use h1→h2→h3 in order |
| No skip link | 2.4.1 | Add "Skip to content" link |
| Auto-playing media | 1.4.2 | Add pause/stop controls |
| Missing autocomplete | 1.3.5 | Add autocomplete="email" etc. |
Find Issues on Your Store
Run a free scan to see which of these issues affect your Shopify store.
Scan My Store →