Use this checklist to audit your Shopify store's accessibility compliance. Click any criterion to expand Shopify-specific implementation guidance. Check items off as you complete them and your progress is tracked automatically.
1
Principle 1
Perceivable
Information and UI components must be presentable to users in ways they can perceive.
Level A - Must Have
1.1.1
Non-text Content
▼
- All product images have descriptive alt text
- Alt text describes what the image shows ("Navy blue t-shirt, front view" not just "t-shirt")
- Decorative images use alt="" (empty alt attribute)
- Icons have text labels or ARIA labels
- Logo has alt text with company name
Where to check in Shopify
- Products → Each product → Media → Click image → "Add alt text"
- Theme code: Search for <img tags without alt attributes
1.2.1
Audio-only and Video-only (Prerecorded)
▼
- Audio-only content has text transcript
- Video-only content has text description or audio track
Where to check in Shopify
- Any audio files uploaded for product demos
- Video content in product descriptions
1.2.2
Captions (Prerecorded)
▼
- Product videos have captions
- Tutorial videos have captions
- Promotional videos have captions
Where to check in Shopify
- Upload videos to YouTube with captions, then embed
- Or provide transcript below video
1.2.3
Audio Description or Media Alternative
▼
- Videos have audio description or text transcript
- Important visual information is described in audio or text
Where to check in Shopify
- Provide transcript for product videos
- Describe what's shown visually
1.3.1
Info and Relationships
▼
- Proper heading hierarchy (H1 → H2 → H3, no skipping)
- One H1 per page (usually product title or page title)
- Form labels associated with inputs using
forandid - Lists use <ul>, <ol>, or <dl> tags (not just line breaks)
- Tables use proper <th> headers for data tables
Where to check in Shopify
- Use WAVE browser extension to check heading structure
- Right-click form fields → Inspect → verify label association
- Theme code: Check heading tags in Liquid templates
1.3.2
Meaningful Sequence
▼
- Content reading order makes sense when read linearly
- Tab order follows logical flow
- CSS doesn't visually reorder content in confusing ways
Where to check in Shopify
- Press Tab repeatedly and verify focus moves logically
- Use screen reader to hear content order
1.3.3
Sensory Characteristics
▼
- Instructions don't rely only on shape ("click the round button")
- Instructions don't rely only on location ("click the button on the right")
- Instructions don't rely only on sound ("listen for the beep")
Where to check in Shopify
- Review all instructional text in checkout
- Review product assembly/usage instructions
1.4.1
Use of Color
▼
- Color isn't the only way to convey information
- "In Stock" / "Out of Stock" use text, not just green/red
- Required form fields have asterisk or "required" text, not just red border
- Error messages use text, not just red highlighting
Where to check in Shopify
- Check product availability indicators
- Check form validation errors
- Check sale/discount badges
1.4.2
Audio Control
▼
- Auto-playing audio can be paused or stopped
- Auto-playing audio is under 3 seconds OR has controls
Where to check in Shopify
- Background music on homepage
- Auto-play product videos
Level AA - Required for ADA Compliance
1.4.3
Contrast (Minimum)
▼
- Normal text has 4.5:1 contrast ratio minimum
- Large text (18pt+ or 14pt+ bold) has 3:1 contrast ratio minimum
- Tested with WebAIM Contrast Checker
Where to check in Shopify
- Test body text color vs background
- Test button text vs button background
- Test navigation text vs background
- Common failures: light gray (#999) on white - only 2.85:1, fails
1.4.4
Resize Text
▼
- Text can be resized to 200% without loss of content or functionality
- No horizontal scrolling at 200% zoom
- Layout doesn't break when zoomed
Where to check in Shopify
- Zoom browser to 200% (Cmd/Ctrl + plus multiple times)
- Verify all content still readable and accessible
- Check on mobile too
1.4.5
Images of Text
▼
- Text isn't presented as images (unless necessary for logos)
- Actual text used instead of text in images
- If text in images is necessary, alt text matches exactly
Where to check in Shopify
- Promotional banners (use HTML text overlay instead)
- Sale badges (use CSS text instead of image badges)
1.4.10
Reflow
▼
- Content reflows at 320px width without horizontal scrolling
- Mobile-responsive design works properly
- No pinch-zoom required to read content on mobile
Where to check in Shopify
- Resize browser to 320px wide
- Test on actual mobile device
- Verify no horizontal scrolling needed
1.4.11
Non-text Contrast
▼
- UI components have 3:1 contrast ratio
- Icons and buttons have sufficient contrast
- Form field borders have 3:1 contrast
Where to check in Shopify
- Test button borders
- Test form input borders
- Test icon colors
1.4.12
Text Spacing
▼
- Text remains readable when spacing is adjusted
- Line height 1.5x font size
- Paragraph spacing 2x font size
- No loss of content when spacing increases
Where to check in Shopify
- Use browser extension to test text spacing
- Verify content doesn't get cut off
1.4.13
Content on Hover or Focus
▼
- Tooltips can be dismissed without moving pointer/focus
- Tooltips remain visible when pointer hovers over them
- Tooltips persist until user dismisses or removes hover/focus
Where to check in Shopify
- Product quick-view tooltips
- Size guide pop-ups
- Hover effects on navigation
2
Principle 2
Operable
User interface components and navigation must be operable.
Level A - Must Have
2.1.1
Keyboard
▼
- All functionality available via keyboard
- Can add products to cart with keyboard
- Can complete checkout with keyboard only
- Can navigate entire site with Tab, Enter, Space, Arrow keys
Where to check in Shopify
- Unplug mouse, navigate entire site with keyboard
- Complete a test purchase using only keyboard
- Common failures: cart drawer can't be closed, dropdowns don't work
2.1.2
No Keyboard Trap
▼
- Keyboard focus never gets trapped
- Can escape from all modals/pop-ups with Escape key
- Can tab out of all widgets and components
- Cart drawer doesn't trap focus
Where to check in Shopify
- Tab through cart drawer, verify can escape
- Tab through modals, verify Escape key works
- Tab through navigation dropdowns
2.1.4
Character Key Shortcuts
▼
- Single character shortcuts can be turned off or remapped
- Single key shortcuts only work when component has focus
Where to check in Shopify
- Review any keyboard shortcuts implemented
- Typically not an issue for standard Shopify stores
2.2.1
Timing Adjustable
▼
- User can turn off, adjust, or extend time limits
- Session timeouts give 20-second warning
- User can extend timeout before it expires
Where to check in Shopify
- Checkout session timeout
- Cart expiration warnings
2.2.2
Pause, Stop, Hide
▼
- Auto-updating content can be paused, stopped, or hidden
- Carousels have pause button
- Auto-scrolling content can be stopped
Where to check in Shopify
- Homepage carousel/slideshow
- Auto-playing product video galleries
- Rotating testimonials
2.3.1
Three Flashes or Below Threshold
▼
- Content doesn't flash more than 3 times per second
- No flashing animations that could trigger seizures
Where to check in Shopify
- Animated GIFs in product images
- Loading animations
- Promotional banners with flashing effects
2.4.1
Bypass Blocks
▼
- "Skip to main content" link at top of page
- Skip link appears on keyboard focus
- Skip link jumps to main content area
Where to check in Shopify
- Press Tab on homepage (before clicking anything)
- Should see "Skip to main content" link appear
- Pressing Enter should jump past navigation
HTML - Add to theme.liquid before header
<a href="#main-content" class="skip-link">Skip to main content</a>
2.4.2
Page Titled
▼
- Every page has unique, descriptive title
- Page title describes page content
- Format: "Page Name – Store Name"
Where to check in Shopify
- Check browser tab title on each page type
- Product pages should show product name
- Collection pages should show collection name
2.4.3
Focus Order
▼
- Tab order follows logical reading order
- Focus doesn't jump randomly around page
- Tab order makes sense for completing tasks
Where to check in Shopify
- Press Tab repeatedly through entire page
- Verify focus moves in logical order
- Check cart and checkout especially
2.4.4
Link Purpose (In Context)
▼
- Link text describes where link goes
- Avoid generic "Click here" or "Read more" without context
- Use "Learn more about [Product Name]" instead of just "Learn more"
Where to check in Shopify
- Review all "Read more", "Click here", "Learn more" links
- Add context to generic link text
Level AA - Required for ADA Compliance
2.4.5
Multiple Ways
▼
- At least two ways to find pages (navigation menu + search)
- Sitemap available
- Related products provide alternative navigation
Where to check in Shopify
- Main navigation menu exists
- Search function works
- Sitemap linked in footer (or exists at /sitemap.xml)
2.4.6
Headings and Labels
▼
- Headings describe topic or purpose
- Form labels describe what input is for
- Headings and labels are clear and descriptive
Where to check in Shopify
- Review all headings for clarity
- Review all form labels
- Use "Email address" not just "Email"
2.4.7
Focus Visible
▼
- Keyboard focus indicator always visible
- Clear outline on focused elements
- Never use outline: none without replacing with visible alternative
Where to check in Shopify
- Press Tab and watch for visible outline/highlight
- Check buttons, links, form fields all have visible focus
- Common failure: theme CSS removes outline
CSS Fix - Add to theme stylesheet
a:focus, button:focus, input:focus {
outline: 2px solid #1a6ef5;
outline-offset: 2px;
}
2.5.1
Pointer Gestures
▼
- All multi-point or path-based gestures have single-pointer alternative
- Pinch zoom can be done with +/- buttons
- Swipe gestures have click/tap alternative
Where to check in Shopify
- Image zoom functions
- Carousel/slideshow navigation
- Product image galleries
2.5.2
Pointer Cancellation
▼
- Click events trigger on "up" event (mouse release)
- User can abort action by moving away before releasing
- No critical actions triggered on "down" event only
Where to check in Shopify
- Test "Add to Cart" button (should trigger on release, not press)
3
Principle 3
Understandable
Information and the operation of user interface must be understandable.
Level A - Must Have
3.1.1
Language of Page
▼
- HTML lang attribute set on page
- <html lang="en"> for English stores
Where to check in Shopify
- View page source, check <html> tag
- Should see lang="en" or appropriate language code
3.2.1
On Focus
▼
- Focusing on element doesn't trigger unexpected changes
- Tabbing to form field doesn't submit form
- Focus doesn't open pop-ups or navigate away
Where to check in Shopify
- Tab through forms without changing anything
- Verify nothing unexpected happens
3.2.2
On Input
▼
- Changing input doesn't trigger unexpected changes
- Selecting variant doesn't auto-add to cart
- Changing quantity doesn't auto-update cart
Where to check in Shopify
- Change product variants (size, color)
- Change quantity
- Verify requires explicit "Add to Cart" click
3.3.1
Error Identification
▼
- Form errors clearly identified
- Error messages describe what's wrong
- Error messages associated with problem field
Where to check in Shopify
- Try submitting forms with errors
- Verify clear error messages appear
- Screen reader announces errors
3.3.2
Labels or Instructions
▼
- All form fields have visible labels
- Instructions provided where needed
- Format requirements stated (e.g., "MM/DD/YYYY")
Where to check in Shopify
- Every form input has visible label
- Required fields marked clearly
- No placeholder-only labels
Level AA - Required for ADA Compliance
3.1.2
Language of Parts
▼
- Content in different language has lang attribute
- Product descriptions in French have lang="fr"
Where to check in Shopify
- If you have multilingual content, verify lang attributes
3.2.3
Consistent Navigation
▼
- Navigation menu appears in same location on all pages
- Navigation order stays consistent
- Footer links stay consistent
Where to check in Shopify
- Navigation same on all pages
- Footer same on all pages
3.2.4
Consistent Identification
▼
- Same icons mean same thing throughout site
- Shopping cart icon always means cart
- Search icon always means search
Where to check in Shopify
- Icons used consistently
- Buttons with same function have same label
3.3.3
Error Suggestion
▼
- Error messages suggest how to fix
- "Email format invalid" → "Please enter valid email (example@domain.com)"
- Provide examples of correct format
Where to check in Shopify
- Submit forms with various errors
- Verify helpful suggestions provided
4
Principle 4
Robust
Content must be robust enough to be interpreted by a wide variety of assistive technologies.
Level A - Must Have
4.1.1
Parsing
▼
- HTML validates without major errors
- No duplicate IDs on same page
- Elements have complete start and end tags
Where to check in Shopify
- Use W3C HTML Validator: validator.w3.org
- Fix any parsing errors found
4.1.2
Name, Role, Value
▼
- All UI components have accessible name
- All UI components have role (button, link, etc.)
- Component state communicated (expanded, selected, etc.)
Where to check in Shopify
- Custom dropdowns have proper ARIA
- Accordions announce expanded/collapsed state
- Tabs announce selected tab
Level AA - Required for ADA Compliance
4.1.3
Status Messages
▼
- Status messages announced to screen readers
- "Item added to cart" announced via ARIA live region
- Form submission success announced
- Loading/processing states announced
Where to check in Shopify
- Add product to cart → screen reader should announce
- Submit form → success message announced
- Error occurs → error announced automatically
HTML - Add ARIA live region
<div aria-live="polite" aria-atomic="true"
class="sr-only" id="status-messages"></div>
Shopify-Specific Critical Checks
These areas are the most common failure points on Shopify stores - test each one carefully.
Cart Accessibility
- Cart drawer opens and closes with keyboard
- Cart updates announced to screen readers
- Quantity controls keyboard accessible
- Remove item buttons keyboard accessible
Checkout Accessibility
- All form fields labeled properly
- Payment fields keyboard accessible
- Shipping options selectable with keyboard
- Order review clearly presented
Product Pages
- Variant selectors keyboard accessible
- Color swatches have text labels (not color-only)
- Size selectors properly labeled
- Image galleries keyboard navigable
Navigation
- Dropdown menus work with keyboard
- Mobile menu keyboard accessible
- Search function keyboard accessible
Testing Tools
Use a combination of automated and manual testing to catch all violations.
Automated
WAVE Extension
Visual accessibility evaluation tool that identifies errors directly on your page.
wave.webaim.org →Automated
Axe DevTools
Industry-standard accessibility testing built into Chrome DevTools for developers.
deque.com/axe →Automated
Lighthouse
Built into Chrome DevTools. Run an accessibility audit with one click.
Chrome DevTools →Manual
Keyboard Navigation
Unplug your mouse and navigate your entire store using only the keyboard.
Our testing process →Manual
Screen Readers
NVDA (Windows, free) and VoiceOver (Mac, built-in) for real assistive tech testing.
Download NVDA →Manual
Contrast Checker
Test any color combination for WCAG-compliant contrast ratios instantly.
WebAIM Checker →