Common WCAG Failures in Shopify Themes: Top 10 Accessibility Issues

Shopify themes—even premium, well-reviewed themes—commonly contain accessibility barriers that violate WCAG guidelines. Merchants assume that purchasing a professional theme means their store is accessible. This assumption is frequently wrong.

Understanding which accessibility failures appear most often in Shopify themes helps merchants evaluate their current store, make informed theme selection decisions, and prioritize remediation efforts. This analysis examines the ten most common WCAG failures found across Shopify themes and provides guidance for addressing each.

Why Shopify Themes Have Accessibility Issues

Before examining specific failures, it's worth understanding why accessibility problems are so prevalent in Shopify themes.

Design Prioritization

Theme developers prioritize visual appeal and feature richness—the factors that drive theme sales. Accessibility, while important, doesn't appear in theme previews or feature lists in ways that influence purchasing decisions. This creates economic incentives that deprioritize accessibility.

Technical Complexity

Modern Shopify themes include sophisticated JavaScript interactions, complex CSS animations, and dynamic content loading. Each adds potential accessibility barriers that require deliberate attention to avoid.

Limited Testing

Theme developers rarely test with actual assistive technologies. Automated scanning catches some issues, but the 60-70% of WCAG criteria requiring manual evaluation often go untested.

Liquid Template Constraints

Shopify's Liquid templating language and theme architecture create patterns that can inadvertently produce accessibility issues when developers follow common approaches without accessibility awareness.

Top 10 WCAG Failures in Shopify Themes

1. Missing or Inadequate Product Image Alt Text

WCAG Criterion: 1.1.1 Non-text Content (Level A)

The Problem: Product images without meaningful alternative text prevent screen reader users from understanding what products look like. This is the single most common accessibility failure in e-commerce.

Common Patterns:

• Alt text completely missing
• Alt text containing only filename ("product-123.jpg")
• Generic alt text ("Product image" repeated for all images)
• Alt text missing for variant images (color swatches, alternate angles)

Impact: Screen reader users cannot evaluate products visually described only through images. For fashion, home goods, and other visually-oriented products, this effectively prevents informed purchasing.

How to Fix: Shopify allows alt text entry in the product media settings. Each image should describe what's shown: "Navy blue wool peacoat with brass buttons, front view" rather than "Peacoat" or nothing.

For detailed guidance, see our Alt Text Best Practices guide.

Theme vs. Content Issue: This is primarily a content issue—themes can't generate meaningful alt text automatically. However, themes should make alt text fields prominent and provide guidance to merchants.

2. Inaccessible Navigation Menus

WCAG Criteria: 2.1.1 Keyboard (Level A), 4.1.2 Name, Role, Value (Level A)

The Problem: Dropdown and mega menus frequently fail keyboard accessibility requirements. Users who navigate via keyboard cannot access menu items, effectively blocking site navigation.

Common Patterns:

• Dropdowns only open on mouse hover, not keyboard focus
• Submenu items unreachable via keyboard
• No visible focus indicators on menu items
• Menu doesn't close when focus moves away
• Mobile menu hamburger button not keyboard accessible

Impact: Users who cannot use a mouse—including screen reader users, users with motor disabilities, and power users preferring keyboard navigation—cannot navigate the store.

How to Fix:

• Ensure all menu items receive keyboard focus
• Open submenus on Enter/Space key, not just hover
• Implement arrow key navigation within menus
• Provide visible focus indicators
• Use proper ARIA attributes (aria-expanded, aria-haspopup)

Theme-Level Fix Required: Navigation accessibility requires theme code changes. Merchants should evaluate theme navigation accessibility before purchase or plan for customization.

3. Color Contrast Failures

WCAG Criterion: 1.4.3 Contrast (Minimum) (Level AA)

The Problem: Text that doesn't meet minimum contrast ratios (4.5:1 for normal text, 3:1 for large text) is difficult or impossible to read for users with low vision or color blindness.

Common Patterns:

• Light gray text on white backgrounds (especially footer, placeholder text)
• White text on light-colored promotional banners
• Sale price text with insufficient contrast
• Form placeholder text too light
• Link text not distinguishable from surrounding text

Impact: Approximately 8% of men and 0.5% of women have color vision deficiency. Low contrast affects far more users, including anyone viewing screens in bright environments or with less-than-perfect vision.

How to Fix:

• Use contrast checking tools to verify all text meets requirements
• Adjust theme color variables in settings or CSS
• Pay special attention to text overlaid on images
• Ensure form placeholders meet contrast requirements

Theme-Level Fix: Color contrast issues often exist in theme defaults. Check theme settings first; CSS customization may be needed for elements not exposed in settings.

For detailed guidance, see our Color Contrast Requirements article.

4. Missing Form Labels

WCAG Criterion: 3.3.2 Labels or Instructions (Level A)

The Problem: Form fields without properly associated labels leave screen reader users unable to understand what information to enter. This affects newsletter signups, contact forms, account creation, and checkout.

Common Patterns:

• Placeholder text used as only "label" (disappears when typing)
• Visual labels present but not programmatically associated
• Icon-only input fields (search magnifying glass without label)
• Checkout fields with unclear labeling

Impact: Screen reader users hear "edit text" rather than "Email address" when encountering unlabeled fields. They cannot complete forms independently.

How to Fix:

<!-- Bad: Placeholder as label -->
<input type="email" placeholder="Email address">

<!-- Good: Proper label association -->
<label for="email">Email address</label>
<input type="email" id="email" placeholder="you@example.com">

<!-- Good: Visually hidden label -->
<label for="search" class="visually-hidden">Search products</label>
<input type="search" id="search" placeholder="Search...">

Theme-Level Fix Required: Form labeling requires template changes. Evaluate forms across the theme: newsletter signup, search, contact, login, registration, and checkout guest forms.

For comprehensive form guidance, see our Form Accessibility Checklist.

5. Missing Skip Navigation Link

WCAG Criterion: 2.4.1 Bypass Blocks (Level A)

The Problem: Without skip navigation, keyboard users must tab through the entire header and navigation on every page before reaching main content. On sites with complex navigation, this requires dozens of keystrokes per page.

Common Patterns:

• Skip link completely absent
• Skip link present but hidden and never becomes visible
• Skip link target (#main-content) doesn't exist
• Skip link scrolls page but doesn't move focus

Impact: Keyboard users waste significant time and effort navigating repetitive content on every page. This makes sites practically unusable for keyboard-only navigation.

How to Fix:

<!-- Add as first focusable element in body -->
<a href="#main-content" class="skip-link">Skip to main content</a>

<!-- CSS: Hidden until focused -->
.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  position: static;
  left: auto;
}

<!-- Ensure target exists and is focusable -->
<main id="main-content" tabindex="-1">

Theme-Level Fix Required: Skip links must be added to theme layout templates. This is a common theme deficiency.

6. Focus Indicator Removal

WCAG Criterion: 2.4.7 Focus Visible (Level AA)

The Problem: Themes often remove default browser focus outlines for aesthetic reasons without providing alternative focus indicators. This makes keyboard navigation impossible to track visually.

Common Patterns:

• Global outline: none without replacement
• Focus indicators removed from buttons and links
• Focus indicators present but with insufficient contrast
• Focus indicators only on some elements

Impact: Keyboard users cannot see which element is currently focused. Navigation becomes guesswork, making the site effectively unusable via keyboard.

How to Fix:

/* Bad: Removes focus indicator with no replacement */
*:focus { outline: none; }

/* Good: Custom focus indicator */
*:focus {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

/* Good: Focus-visible for mouse vs keyboard distinction */
*:focus-visible {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

Theme-Level Fix: Search theme CSS for outline: none or outline: 0. Replace with visible focus styles that match the theme aesthetic.

7. Inaccessible Product Variant Selectors

WCAG Criteria: 4.1.2 Name, Role, Value (Level A), 1.4.1 Use of Color (Level A)

The Problem: Size selectors, color swatches, and other variant options frequently fail accessibility requirements. Custom-styled selectors lose native accessibility.

Common Patterns:

• Color swatches identified only by color (no text label)
• Size buttons without proper button role/state
• Selected state indicated only by color change
• Unavailable variants not clearly indicated to screen readers

Impact: Screen reader users cannot determine what variants are available or which is selected. Users with color blindness may not perceive selection states.

How to Fix:

<!-- Color swatch with accessible label -->
<button
  aria-label="Navy Blue"
  aria-pressed="true"
  class="color-swatch color-navy">
</button>

<!-- Size selector with proper state -->
<button
  aria-pressed="false"
  class="size-option">
  Medium
</button>

Theme-Level Fix Required: Variant selector accessibility requires template and JavaScript changes. This is a common area where themes sacrifice accessibility for visual design.

8. Auto-Playing Carousels and Sliders

WCAG Criteria: 2.2.2 Pause, Stop, Hide (Level A), 1.4.2 Audio Control (Level A)

The Problem: Homepage carousels and product image sliders that auto-advance create multiple accessibility barriers.

Common Patterns:

• No pause/stop control for auto-advancing content
• Carousel navigation not keyboard accessible
• Slide content announced repeatedly by screen readers
• Video carousels auto-playing with sound

Impact: Users with cognitive disabilities may not have time to read content before it changes. Screen reader users hear content change unexpectedly. Users with vestibular disorders may experience discomfort from motion.

How to Fix:

• Add visible pause/play controls
• Stop auto-advance when user interacts
• Ensure all carousel controls are keyboard accessible
• Use proper ARIA live regions for slide changes
• Never auto-play audio

Theme-Level Fix Required: Carousel accessibility requires JavaScript and template modifications. Consider whether carousels are necessary—static hero images avoid these issues entirely.

9. Missing Heading Structure

WCAG Criterion: 1.3.1 Info and Relationships (Level A)

The Problem: Pages without proper heading hierarchy prevent screen reader users from understanding page structure and navigating efficiently.

Common Patterns:

• Multiple H1 elements per page
• Heading levels skipped (H1 → H3, missing H2)
• Visual headings not marked as heading elements
• Headings used for styling rather than structure

Impact: Screen reader users navigate by headings—it's the primary method for understanding page structure. Improper heading hierarchy makes this navigation meaningless.

How to Fix:

• Single H1 per page (typically product name or page title)
• Sequential heading levels (H1 → H2 → H3, no skipping)
• Use CSS for visual styling, HTML for structure
• Every major section should begin with a heading

Theme-Level Fix: Heading structure issues appear in theme templates. Review each template type for proper heading hierarchy.

10. Inaccessible Modal Dialogs

WCAG Criteria: 2.1.2 No Keyboard Trap (Level A), 2.4.3 Focus Order (Level A)

The Problem: Modals for quick view, size guides, newsletter popups, and cart drawers frequently trap keyboard focus or fail to manage focus properly.

Common Patterns:

• Focus doesn't move to modal when opened
• Tab key escapes modal to background content
• No way to close modal via keyboard
• Focus doesn't return to trigger when modal closes
• Background content remains interactive

Impact: Keyboard users may become trapped in modals or unable to interact with modal content. Screen reader users may not realize a modal has opened.

How to Fix:

• Move focus to modal (or its first focusable element) when opened
• Trap focus within modal while open
• Close on Escape key press
• Return focus to trigger element when closed
• Add aria-modal="true" and proper labeling

For implementation details, see our Keyboard Navigation Tutorial.

Evaluating Themes Before Purchase

Accessibility Testing Checklist

Before purchasing a Shopify theme, test the demo:

1. Keyboard Navigation: Can you navigate the entire demo using only Tab, Enter, and arrow keys?
2. Focus Visibility: Can you see where focus is at all times?
3. Skip Link: Is there a skip navigation link?
4. Mobile Menu: Is the mobile menu accessible via keyboard?
5. Product Variants: Can you select sizes/colors without a mouse?
6. Carousels: Can carousels be paused? Are controls keyboard accessible?

Questions for Theme Developers

• Has the theme been tested with screen readers?
• Do you have a VPAT or accessibility conformance report?
• What WCAG level does the theme target?
• How do you handle accessibility bug reports?

Taking Action

Shopify theme accessibility issues are common but fixable. Merchants should:

1. Assess current theme against these common failures
2. Prioritize remediation by user impact (navigation, forms, and checkout first)
3. Consider theme change if current theme requires extensive accessibility work
4. Implement monitoring to catch regressions from theme updates

For comprehensive Shopify accessibility guidance, see our Shopify Accessibility Requirements guide.

Schedule a TestParty demo and get a 14-day compliance implementation plan.

Related Resources

• Shopify Accessibility Requirements: Complete Guide
• Shopify Plus Accessibility
• Shopify Accessibility Apps: Which Tools Work?
• Form Accessibility Checklist