Shopify Craft Theme Accessibility: What WCAG Violations to Expect and How to Fix Them

Craft Theme and Accessibility: The Context

Craft is Shopify's theme designed for artisan brands, handmade goods, and lifestyle products. It prioritizes visual storytelling with large hero images, product photography, and minimal UI chrome. This aesthetic focus creates specific accessibility challenges that differ from more functional themes like Dawn or Debut.

This guide covers the WCAG 2.1 AA violations most commonly found in Craft-based stores, with actionable fixes for each.

Common Accessibility Issues in Craft Stores

1. Product Images Without Meaningful Alt Text

WCAG: 1.1.1 Non-text Content | Severity: Critical

Craft's visual-forward design means product images are front and center. But like all Shopify themes, Craft renders images using whatever alt text the merchant has entered in the Shopify Admin — which is often blank or generic.

For a lifestyle brand selling handmade ceramics, a product image might be described as "Bowl" (the product title) when a meaningful description would be: "Hand-thrown stoneware bowl with matte sage glaze and uneven textured rim, approximately 6 inches in diameter."

Screen reader users browsing a Craft store need these descriptions to understand and evaluate products. The fix operates at two levels:

1. Template fix: Ensure Craft's snippets/card-product.liquid passes the product alt text correctly
2. Content fix: Add meaningful alt text to products in Shopify Admin

AccessComply's AltTextAgent handles both — it identifies images with missing or generic alt text and generates contextually appropriate descriptions.

2. Color Contrast in Custom Configurations

WCAG: 1.4.3 Contrast (Minimum) | Severity: Serious

Craft is highly configurable via the theme customizer, which means contrast issues depend heavily on the merchant's color choices. Common failure points:

• Price text on product cards: When merchants use light-colored text over a light background section
• "Add to Cart" button: If the button color is customized without checking contrast ratios
• Navigation links: Particularly on transparent/overlay navigation over hero images
• Sale badges: Red or orange text that does not meet 4.5:1 against the badge background

The challenge is that Craft's theme editor provides color pickers without contrast warnings. Merchants unknowingly create failing combinations.

How to check: Run an axe-core scan or use AccessComply to get the exact contrast ratios and the specific elements failing. The color-contrast rule in axe reports the actual ratio vs. the required 4.5:1.

Fix: Adjust color CSS variables in the theme settings. Craft uses CSS custom properties (e.g., --color-button, --color-button-text) that centralize color management. Changing these variables propagates fixes across all elements that reference them.

3. Navigation and Icon Buttons Without Labels

WCAG: 4.1.2 Name, Role, Value | Severity: Critical

Craft's minimal UI uses icon-only buttons for cart, search, account, and mobile menu. These SVG icons render without text, and without aria-label attributes, they announce as "button" to screen readers — no indication of what they do.

Common pattern in Craft:

<button class="header__icon header__icon--cart">
  <svg viewBox="0 0 24 24"><!-- cart SVG --></svg>
</button>

Required fix:

<button class="header__icon header__icon--cart" aria-label="Open cart">
  <svg viewBox="0 0 24 24" aria-hidden="true"><!-- cart SVG --></svg>
</button>

The aria-hidden="true" on the SVG prevents screen readers from reading raw SVG paths. The aria-label on the button provides the accessible name.

Craft stores using a "Wishlist" app or other third-party apps may introduce additional unlabeled icon buttons. Each needs an aria-label.

4. Quick Add / Quick View Modals

WCAG: 4.1.3 Status Messages; 2.1.1 Keyboard | Severity: Serious

Craft includes a "Quick Add" feature that opens a product detail panel without a full page load. This creates two accessibility challenges:

Focus management: When the quick add panel opens, keyboard focus must move to the panel. When it closes, focus must return to the triggering button. Without this, keyboard users lose their place.

Screen reader announcements: The panel's appearance is a state change that screen reader users need to be notified about. This requires aria-live regions or focus management.

Checking for the issue: Manually test by opening a Quick Add panel with the keyboard (Tab to the button, Enter to activate) and check whether focus moves to the panel. If you land anywhere other than inside the panel, there is a focus management failure.

AccessComply's ValidatorAgent detects keyboard trap and focus management issues and flags them for review (these require manual code assessment to fix correctly).

5. Product Filtering Without ARIA Live Regions

WCAG: 4.1.3 Status Messages | Severity: Moderate

Craft's collection filtering (by color, size, type, etc.) updates the product grid via AJAX. When filter results load, sighted users see the updated grid. Screen reader users hear nothing — there is no announcement that the content has changed.

Fix: Add an aria-live region that announces filter results:

<div aria-live="polite" aria-atomic="true" class="visually-hidden" id="product-count">
  Showing {{ collection.products_count }} products
</div>

Update this content via JavaScript when the filter results load.

6. Video and Auto-Playing Media

WCAG: 1.2.2 Captions (Prerecorded); 2.2.2 Pause, Stop, Hide | Severity: Serious

Craft frequently includes video sections for brand storytelling. Videos on Craft stores commonly fail in two ways:

1. Missing captions: Product or brand videos embedded via YouTube/Vimeo often have auto-generated captions disabled or missing. WCAG requires captions for all prerecorded audio content.

2. Auto-playing videos without pause control: If Craft's hero video or background video auto-plays, there must be a mechanism for users to pause it (WCAG 2.2.2). Users with vestibular disorders are particularly affected by auto-playing video.

AccessComply's scanner detects auto-playing media and flags these as violations requiring manual remediation (AccessComply cannot add captions to third-party video platforms).

7. Heading Hierarchy Issues

WCAG: 1.3.1 Info and Relationships | Severity: Moderate

Craft uses headings extensively for product names, section titles, and UI labels. In merchant customizations, it is easy to accidentally break the heading hierarchy — using an h3 without a preceding h2, or using headings purely for visual styling.

Common Craft heading issues:

• Product cards may use h3 in a section that has no h2
• Marketing sections often use heading tags for visual impact, not semantic hierarchy
• After theme customizations, the heading order can jump from h1 to h3

AccessComply's HeadingAgent detects these hierarchy issues and corrects them in the template files.

Running a Craft Accessibility Audit

The best way to get an accurate picture of your specific Craft store's accessibility issues is to run a scan. Different stores have different content, different theme customizations, and different third-party apps — all of which introduce unique violations.

AccessComply's scanner crawls all pages of your store (up to 50 by default), reports every axe-core violation with severity and location, and provides an overall WCAG 2.1 AA compliance score.

For Craft stores, expect to find violations in the following categories:

• Critical: Missing alt text on product images, unlabeled icon buttons
• Serious: Color contrast failures, missing form labels, focus management issues
• Moderate: Heading hierarchy problems, missing ARIA live regions

The total violation count varies significantly based on product catalog size and store configuration. A typical unoptimized Craft store will have between 20 and 80 unique violations.

Further Reading

• Shopify Dawn Theme Accessibility Issues: Common WCAG Violations and How to Fix Them
• Shopify Debut Theme Accessibility Issues: Common WCAG Violations and How to Fix Them
• How to Fix Common Accessibility Issues on Shopify: A Technical Guide
• WCAG 2.1 AA Compliance Checklist for Shopify Store Owners