Shopify Craft Theme Accessibility: What to Test and How to Remediate

Craft Theme and Accessibility: The Context

Craft is a visual-first Shopify theme, but the accessibility result depends on the installed version and the store built with it. Large imagery, product photography, overlays, compact icon controls, and dynamic merchandising sections are useful patterns to inspect rather than assumed defects.

This guide covers WCAG review areas that can arise in a Craft-based store, with actionable examples. Confirm each issue in the rendered storefront before changing code.

Common Accessibility Issues in Craft Stores

1. Product Images Without Meaningful Alt Text

WCAG: 1.1.1 Non-text Content | Severity: Critical

Product images are often central to Craft-based storefronts. Depending on version and customization, the template may render image metadata entered in Shopify admin. Inspect the published HTML and evaluate whether the text alternative matches each image's purpose.

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: Identify the actual snippet or app output and ensure it passes reviewed product alt text correctly
2. Content fix: Add meaningful alt text to products in Shopify Admin

AccessComply may report eligible missing-alt candidates on reached pages and, when a supported content path and plan entitlement apply, offer reviewed description candidates. Template passthrough, decorative intent, and description quality still need merchant verification.

2. Color Contrast in Custom Configurations

WCAG: 1.4.3 Contrast (Minimum) | Severity: Serious

Contrast results depend heavily on merchant colors, imagery, overlays, component states, and app UI. Useful inspection points include:

• 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

Do not assume a color picker validates the rendered foreground/background pair. Test the published component in each relevant state.

How to check: Run an axe-core scan or use AccessComply to surface eligible contrast findings on reached pages. Review the rendered element, state, background image or gradient, font size and weight, and any tool limitation before accepting the result.

Fix: Where the current theme centralizes colors, adjust the relevant theme setting or CSS custom property after reviewing its consumers. Changing a shared variable affects the elements that actually reference it, which is why the diff and representative component states must be tested before publishing.

3. Navigation and Icon Buttons Without Labels

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

Inspect cart, search, account, mobile-menu, wishlist, and app controls for a computed accessible name. An SVG-only control without visible text, aria-label, or aria-labelledby may otherwise be announced without a useful name.

Example pattern to inspect:

<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.

Wishlist and other third-party apps can introduce additional controls. Each needs an accurate accessible name, but the correct mechanism may be visible text, aria-labelledby, or aria-label; coordinate app-owned fixes with the vendor.

4. Quick Add / Quick View Modals

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

If the configured store includes a Quick Add or Quick View panel, test it without a mouse. Dynamic panels commonly require deliberate focus and announcement behavior:

Focus management: If the panel behaves as a modal dialog, focus generally moves into it, stays appropriately contained, and returns to the trigger on close. A non-modal pattern has different expectations and still needs a logical focus order.

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.

Automated checks may surface structural candidates, but keyboard traps, focus restoration, reading order, and task completion require manual testing and often code-owner review.

5. Product Filtering Without ARIA Live Regions

WCAG: 4.1.3 Status Messages | Severity: Moderate

If collection filtering updates the product grid without a page load, verify that the result count or status is exposed without unexpectedly moving focus. Do not assume the installed theme or an app already handles this correctly.

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

If the store uses video sections, review at least these two areas:

1. Captions: Review prerecorded synchronized media for accurate captions where required; do not treat auto-generated captions as verified.

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.

An automated scan may identify eligible media attributes on reached pages, but caption accuracy, audio description, motion behavior, player controls, and third-party platform configuration require manual or vendor review.

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.

Examples to inspect after section and content customization:

• 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

Automated checks may flag empty headings or structural candidates. Choosing the correct heading level requires page context; any safely source-mapped theme change must be merchant-approved and manually checked.

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 free public scanner crawls up to 10 discoverable storefront pages, subject to crawler safety and time limits, reports detected axe-core findings with severity and sample locations, and provides an automated accessibility score for the scanned scope. It does not establish WCAG conformance or guarantee every route was reached.

Use verified customer impact and route importance to prioritize findings. Product understanding, navigation, variant selection, cart actions, forms, and checkout handoffs usually deserve attention before low-traffic presentation issues. Do not infer a violation count or severity distribution from the theme name.

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