Shopify Accessibility: Fixing Themes, Apps, Variants and Cart

Where Shopify accessibility problems come from

Most stores find that a handful of theme and app issues account for the majority of findings, because they repeat on every product and collection page. Content issues are spread thinly but add up.

Working out which layer caused a finding

1. Run the checker on one page of each type. Home page, a collection, a product with variants, a product on sale, a blog post, the cart page and your contact page. Shopify uses one template per type, so these cover almost the whole shop.
2. Inspect the failing element. In the browser's element inspector, theme markup usually sits inside elements whose ids start with shopify-section-. Markup injected by apps is often inside a container named after the app, or inside an iframe, and is frequently added near the end of the body.
3. Switch off app embeds in a preview. In the theme editor, open the App embeds panel and turn embeds off on your duplicate theme, then run the check again. Findings that disappear belong to an app.
4. Compare with a fresh copy of the theme. Add an untouched copy of your theme from the Theme Store or theme library to the admin and check the same page. If the fault is not there, it came from a later code edit.

The fix, step by step

Liquid and HTML patterns for common product page faults

Variant options as a named group

{%- for option in product.options_with_values -%}
  <fieldset class="variant-option">
    <legend>{{ option.name }}</legend>
    {%- for value in option.values -%}
      <input type="radio"
             id="opt-{{ option.position }}-{{ forloop.index }}"
             name="{{ option.name | handle }}"
             value="{{ value | escape }}"
             {% if option.selected_value == value %}checked{% endif %}>
      <label for="opt-{{ option.position }}-{{ forloop.index }}">
        <span class="swatch" aria-hidden="true"></span>
        {{ value }}
      </label>
    {%- endfor -%}
  </fieldset>
{%- endfor -%}

The visible or hidden text {{ value }} gives each swatch its colour or size name, and native radio buttons give arrow-key movement within the group for free. If your design shows only the swatch, wrap the name in a visually hidden class rather than removing it.

Sale prices that make sense when read aloud

<div class="price">
  {%- if product.compare_at_price > product.price -%}
    <span class="visually-hidden">Regular price</span>
    <s>{{ product.compare_at_price | money }}</s>
    <span class="visually-hidden">Sale price</span>
    {{ product.price | money }}
  {%- else -%}
    {{ product.price | money }}
  {%- endif -%}
</div>

Most screen readers do not announce strike-through formatting, so without the hidden labels shoppers hear two prices with no idea which one they pay. Shopify's own free themes already include this pattern; older or heavily customised themes often do not.

Announcing variant and basket changes

<div id="product-status" class="visually-hidden" role="status" aria-live="polite"></div>

// after the variant changes and the price is updated:
document.getElementById('product-status').textContent =
  'Selected: Navy, Large. Price £45. In stock.';

Keep the status element in the template from the start and only change its text. The same element can announce "Added to your basket" when there is no cart drawer.

Page language

Check that layout/theme.liquid sets the language on the root element, for example <html lang="{{ request.locale.iso_code }}">. This makes screen readers use the right pronunciation, and it follows the shopper's chosen language on multilingual stores.

Apps, overlays and third-party widgets

Apps are the part of a Shopify store most likely to add accessibility problems after launch, because each one injects its own markup, styles and scripts. Before installing, look at the app's listing and documentation for any statement about keyboard and screen reader support, and try its demo store with the keyboard.

• Pop-ups and spin-to-win wheels. Check the delay, whether Escape closes them, whether focus moves in and out correctly, and whether the close button has a name. Many can be switched to a less intrusive bar or slide-in.
• Reviews. Star ratings should be readable as text, such as "Rated 4.5 out of 5 from 28 reviews", not just a row of icons.
• Chat and help widgets. The launcher must be a named button, and the chat window must not trap focus once opened.
• Filters and search. When a collection updates after ticking a filter, the number of results should be announced, and focus should not jump to the top of the page.

What about checkout?

Shopify runs the checkout pages itself, and merchants cannot edit their HTML directly. The older checkout.liquid customisation route has been retired in favour of checkout extensibility, where changes are made through branding settings and checkout extensions. In practice that means:

• Your main responsibility in checkout is branding: make sure the colours and fonts you choose in the checkout editor keep text and buttons readable.
• Any checkout or thank-you page extension you install or build should be tested with a keyboard and a screen reader, like any other app.
• If you find a problem in the core checkout, report it to Shopify Support with the page, browser and assistive technology you used.

Accelerated payment buttons, such as wallet buttons on product and cart pages, are provided by the payment services. Check that they can be reached with Tab and are not hidden behind a sticky Add to cart bar.

Content habits for store owners and staff

Theme and app fixes are made once. Content accessibility depends on everyone who adds products and pages, so build a short checklist into your routine. The detail for each is in its own guide:

• Alt text for each product photo, describing what that photo shows: see fixing alt text.
• Headings in product descriptions and pages chosen from the Heading options in the rich text editor, in order, not bold paragraphs: see fixing heading structure.
• Link wording that names the destination rather than "click here": see fixing vague link text.
• Size charts and care instructions as real tables or text, not images.
• Videos with captions, and no autoplaying sound.

Colour scheme contrast and visible focus outlines are theme-wide settings; fixing colour contrast and fixing focus indicators explain what to aim for.

Keeping it fixed through theme updates

Theme developers release updates, and Shopify lets you add the new version to your theme library. Code edits you made to the old version are not carried across automatically, so keep a record of every accessibility change you make in Liquid, CSS or JavaScript: the file, what you changed and why. Before publishing an updated theme, rerun the checker and your keyboard walk-through, reapply any changes the update did not include, and tell the theme developer about faults so they can fix them for everyone. Themes listed in the Shopify Theme Store have to meet Shopify's published accessibility requirements, which is a useful baseline, but it does not cover your settings, apps or content.