Launching a Shopify store without checking accessibility is like opening a physical store with stairs but no ramp so you're excluding 15% of potential customers and exposing yourself to legal risk. Over 4,500 ADA lawsuits were filed against e-commerce websites in 2024, with Shopify stores being frequent targets due to common accessibility failures in themes and apps.
This checklist covers the 15 most critical accessibility issues to fix before launching your Shopify store. Each item includes a quick test to identify the problem, why it matters, and how to fix it.
1 Alt Text on All Product Images 🔴 Critical
What it is:
Descriptive text that explains what images show, read aloud by screen readers for blind users.
Quick test:
- Right-click any product image → Inspect
- Look for alt="descriptive text here"
- If you see alt="" or no alt attribute, it's missing
Why it matters:
- Blind customers can't make purchase decisions without knowing what products look like
- WCAG 2.1 Success Criterion 1.1.1 (Level A) - most basic requirement
- Missing alt text is cited in virtually every accessibility lawsuit
How to fix:
- Add descriptive alt text to every product image in Shopify admin
- Be specific: "Navy blue organic cotton t-shirt, front view" not just "t-shirt"
- Read our complete guide to Shopify alt text →
2 Proper Heading Structure (H1 → H2 → H3) 🟡 High
What it is:
Headings organized in hierarchical order (one H1, then H2s, then H3s under H2s).
Quick test:
- Install WAVE browser extension
- Visit any product page
- Click WAVE icon → Structure panel shows heading order
- Headings should follow logical order without skipping levels
Why it matters:
- Screen reader users navigate pages by jumping between headings
- Skipping heading levels (H1 → H3) creates confusion about page structure
- WCAG 2.1 SC 1.3.1 (Level A)
Common Shopify heading mistakes:
- Homepage has multiple H1s (should only have one)
- Product pages have no H1 (product title should be H1)
- Sections jump from H2 to H4 (skipping H3)
How to fix:
- Edit theme code (Liquid templates)
- Ensure one H1 per page (usually page title)
- Use H2 for main sections, H3 for subsections
- Never skip heading levels
3 Color Contrast Ratio (4.5:1 Minimum) 🟡 High
What it is:
Sufficient contrast between text and background colors so people with low vision can read content.
Quick test:
- Use WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/
- Test your body text color vs background
- Test button text vs button background
- Ratio must be at least 4.5:1 for normal text, 3:1 for large text (18pt+)
Why it matters:
- 1 in 12 men and 1 in 200 women have color blindness
- Elderly users often have reduced vision
- WCAG 2.1 SC 1.4.3 (Level AA)
Common Shopify contrast failures:
- Light gray text (#999) on white background (2.8:1 - fails)
- "Sale" badges with poor contrast
- Navigation text too light
- Form placeholder text too faint
How to fix:
- Test all text/background combinations
- Darken light text or lighten dark backgrounds
- Update theme CSS color values
- Example fix: Change #999999 to #595959 for better contrast
4 Keyboard Navigation for All Interactive Elements 🔴 Critical
What it is:
Every button, link, form field, and interactive element must work with keyboard alone (Tab, Enter, Space, Escape keys).
Quick test:
- Unplug your mouse (seriously)
- Navigate entire site using only keyboard
- Press Tab to move between elements
- Press Enter/Space to activate buttons/links
- Can you complete a purchase without a mouse?
Why it matters:
- People with motor disabilities can't use a mouse
- Screen reader users navigate via keyboard
- WCAG 2.1 SC 2.1.1 (Level A)
Common Shopify keyboard failures:
- Cart drawer opens but can't be closed with keyboard
- Dropdown menus don't work with arrow keys
- "Add to Cart" button requires mouse click
- Modal overlays trap keyboard focus
How to fix:
- Add keyboard event handlers to JavaScript
- Ensure Tab reaches all interactive elements
- Add visible focus indicators (outline on focused elements)
- Test extensively with keyboard only
5 Form Labels Associated with Inputs 🔴 Critical
What it is:
Every form field has a visible label properly linked to the input using for and id attributes.
Quick test:
- Click a form label (like "Email")
- Does cursor jump into the input field?
- If yes, label is properly associated
- If no, it's broken
Why it matters:
- Screen readers can't announce what fields are for without labels
- Clicking labels is easier for users with motor difficulties
- WCAG 2.1 SC 3.3.2 (Level A)
How to fix:
6 Skip Link to Main Content 🟡 High
What it is:
Hidden link at top of page that lets keyboard users skip navigation and jump directly to main content.
Quick test:
- Load homepage
- Press Tab once (before clicking anything)
- Does a "Skip to main content" link appear?
- Press Enter - does it jump to main content area?
Why it matters:
- Keyboard users must tab through entire navigation menu on every page
- Skip links let them bypass repetitive navigation
- WCAG 2.1 SC 2.4.1 (Level A)
How to implement:
Add this to your theme header (before navigation):
Then add id="main-content" to your main content container.
7 Focus Indicators Visible on All Elements 🔴 Critical
What it is:
Clear visual outline showing which element is currently focused when navigating with keyboard.
Quick test:
- Press Tab repeatedly while watching the page
- Can you clearly see which element is focused?
- Is there a visible border, outline, or highlight?
Why it matters:
- Keyboard users need to see where they are on the page
- Without focus indicators, keyboard navigation is impossible
- WCAG 2.1 SC 2.4.7 (Level AA)
How to fix:
Remove any outline: none in your CSS and add visible focus styles:
Additional Critical Checks
8 ARIA Landmarks for Screen Reader Navigation 🟡 High
Use semantic HTML elements (<header>, <nav>, <main>, <footer>) or ARIA roles to identify page regions. This helps screen reader users navigate by landmarks, not just visually. Update your theme.liquid to include proper semantic structure.
9 Accessible Error Messages 🟡 High
Form validation errors must be clearly announced to screen readers and associated with problem fields. Use aria-invalid and aria-describedby attributes. Avoid visual-only error indication (red border with no text). Include error summary listing all problems.
10 Cart and Checkout Keyboard Accessible 🔴 Critical
All cart functions (update quantity, remove items, apply coupon, checkout) must work with keyboard alone. Cart abandonment due to accessibility barriers = direct revenue loss. Test the complete purchase flow using only your keyboard. Learn more about checkout accessibility →
11 Product Variant Selectors Accessible 🔴 Critical
Size, color, and other variant options must be announced clearly to screen readers with proper labels. Color swatches should include text labels, not just colors. Use <label> and <fieldset> elements properly. Ensure variants can be selected with keyboard navigation.
12 Page Titles Unique and Descriptive 🟢 Medium
Every page should have a unique <title> tag describing its content. Screen readers announce page titles when pages load. Ensure your theme.liquid uses dynamic titles that include product names, collection names, etc., not just your store name.
13 Images Don't Convey Information Through Color Alone 🟢 Medium
Information conveyed by images shouldn't rely solely on color. Add text labels alongside color indicators. Use icons + color (✓ In Stock, ✗ Out of Stock) instead of just green/red colors. 1 in 12 men have color blindness and would miss color-only information.
14 Videos Have Captions/Transcripts 🟢 Medium
Product videos, tutorials, or promotional videos should include text captions or transcripts. Deaf users can't hear audio. Upload captions when adding videos to Shopify or use YouTube's auto-caption feature (review/edit for accuracy). Provide text transcripts below videos.
15 Accessibility Statement Page 🟢 Medium
Create a dedicated page documenting your commitment to accessibility and how to report issues. While not technically required by WCAG, this demonstrates good faith compliance efforts and can reduce lawsuit risk. Include your conformance level (WCAG 2.1 Level AA), date of last evaluation, and contact for accessibility feedback.
Priority Quick Reference
🔴 Fix Before Launch (Critical):- Alt text on all images
- Keyboard navigation works
- Form labels associated
- Focus indicators visible
- Cart/checkout keyboard accessible
- Product variants accessible
- Heading structure
- Color contrast
- Skip link
- ARIA landmarks
- Accessible errors
- Unique page titles
- No color-only information
- Video captions (if applicable)
- Accessibility statement
Beyond This Checklist
These 15 items cover the most common and impactful accessibility issues, but full WCAG 2.1 Level AA compliance requires meeting 50 success criteria across 13 guidelines.
For comprehensive accessibility testing and remediation:
Get a Professional Shopify Accessibility Audit →Learn about complete WCAG 2.1 AA compliance →
Or request a free mini-audit to see exactly what accessibility issues exist on your store.
Final Thoughts
Accessibility isn't just about avoiding lawsuits, it's about reaching 15% more customers and providing a better experience for everyone. Many of these fixes take minutes to implement but have massive impact on usability.
Start with the critical items (🔴), work through the high-priority items (🟡) in your first week, and tackle the medium items (🟢) over your first month. Your store will be significantly more accessible than 95% of Shopify stores.
Need help implementing these fixes or want a professional evaluation? Request a free accessibility audit and we'll show you exactly what needs to be fixed on your store.