Shopify Accessibility: Product Pages & App Conflicts

Why this matters (conversion + SEO)

• Clear product information and predictable UI increase time on site and add-to-cart rate.

• Accessible filters and forms reduce drop-offs in category and checkout flows.

• Stable layouts and semantic markup support Core Web Vitals and discoverability.

Theme audit: start here

• One H1 per template; logical H2/H3s; landmarks (header, nav, main, footer).

• AA contrast for text, prices, buttons, and focus outlines.

• Visible focus styles; never remove outlines globally.

• Menus, drawers, and modals: keyboard operable; Esc closes; focus returns to trigger.

If your theme ships hover-only menus or div-as-button patterns, fix those first—they impact every page.

Product pages: patterns that sell (and include everyone)

Media & alt text

• Product images: meaningful, concise alt (“Women’s linen shirt in navy, front view”).

• Decorative thumbnails: alt="".

• Video: captions; GIFs/auto-play respect reduced motion.

Title, price, stock

• Title as H1; price and stock as live text (not images).

• Announce price/stock changes when variants change (polite live region).

Variant selectors (use radios, not unlabelled divs)

<fieldset aria-labelledby="size-label">
  <legend id="size-label">Size</legend>
  {% for option in product.options_with_values %}
    {% if option.name == 'Size' %}
      {% for v in option.values %}
        <label>
          <input type="radio" name="size" value="{{ v | escape }}">
          {{ v }}
        </label>
      {% endfor %}
    {% endif %}
  {% endfor %}
</fieldset>

Dynamic price/stock announcement

<div id="var-status" aria-live="polite" class="sr-only"></div>
<script>
function announceVariant(status){ document.getElementById('var-status').textContent = status; }
// Example: announceVariant('Size M in stock — £49');
</script>

Add to cart: use real buttons and feedback

<button type="submit" id="add-to-cart">Add to cart</button>
<div id="cart-announce" aria-live="polite" class="sr-only"></div>
<script>
function announceAdd(name, variant, qty){
  document.getElementById('cart-announce').textContent =
    `Added ${name}, ${variant}, quantity ${qty}`;
}
</script>

Collections & filters: findability without frustration

• Filters and sorting are form controls (checkboxes, radios, select) with labels.

• When results update, post a polite live message: “24 items — Colour: Blue; Size: M”.

• Selected states use more than colour (icons/text).

• Offer Clear all as a labelled button.

• Infinite scroll? Prefer Load more or announce new items.

Cart, mini-cart, and drawers

• Use <button> for actions, inputs for quantity; keep controls labelled.

• Mini-cart drawers are proper dialogs: focus moves inside, is trapped, and returns to trigger on close.

• Announce updates: line item added/removed, totals changed, free-shipping threshold left.

Checkout forms: labels, errors, validation

• Every field has a visible label; groups use <fieldset><legend>.

• Validate on blur + submit; never per-keystroke scolding.

• Error summary at top links to fields; first error receives focus.

• Use autocomplete (email, address-line1, postal-code, tel, cc-number).

• Allow paste for cards/OTP; avoid “memory tests”.

App conflicts (the silent killers)

Typical breakages

• App-injected UI (popups, sliders, sticky bars) steals focus or hides it.

• Variant widgets as unlabelled divs; keyboard traps in modals/drawers.

• Auto-playing carousels without pause; colour-only states.

Mitigations

• Test new apps on staging with keyboard + screen reader.

• Wrap app elements with labels/roles; add focus management.

• Expose Pause/Close actions and respect reduced motion.

• If an app can’t be fixed, replace it.

Adjustable’s Page Options let users hide images/animations or highlight links if a third-party UI gets heavy—reducing friction while you remediate.

Performance & stability (Core Web Vitals)

• Pre-size images; lazy-load below-the-fold media; use modern formats.

• Reserve space for badges, reviews, and dynamic bars to avoid CLS.

• Keep app/script count lean; remove unused features.

Quick testing flow (12–15 minutes)

1. Keyboard path: Home → Collection (filter) → Product (variant) → Add to cart → Mini-cart → Checkout → Submit empty → Fix errors.

2. Focus visibility: Always see focus; no traps in menus/drawers/modals.

3. Screen reader skim: Headings, product info (title, price, variant, stock), filter labels, error messages, live announcements.

4. Mobile spot check: Target sizes, reflow at 320 px, zoom allowed; sticky UI doesn’t obscure focused fields.

Copy-paste checklist (Markdown)

Product Page
- [ ] H1 title; price/stock as live text (not images)
- [ ] Images have meaningful alt; decorative thumbs alt=""
- [ ] Variant selectors are radios/selects with labels
- [ ] Price/stock updates announced via aria-live
- [ ] Add-to-cart is a <button>; success announced

Collections & Filters
- [ ] Real form controls; labelled; keyboard operable
- [ ] Results change announced; Clear all button present
- [ ] Selected states use more than colour

Cart & Drawers
- [ ] Quantity uses inputs; actions are <button>

How Adjustable helps (after structural fixes)

• Accessibility Profiles for quick presets (e.g., “Readable”, “Low Vision”).

• Text Options + Contrast/Colour modes to improve comprehension on dense product pages.

• Reading Ruler, Cursor Adjustment, Screen Mask to focus attention on long descriptions or forms.

• Page Options to scale pages, hide images/animations, and highlight links—great when third-party widgets are visually busy.

• Text-to-Speech for product details; Dictionary for unfamiliar terms; Language Translation for global shoppers.

• Configurable toolbar/widget placement to suit your theme.

Try Adjustable

FAQs

Which Shopify themes are most accessible?
Pick well-maintained, semantic themes and audit keyboard focus, contrast, and variant selectors before launch.

How do I make variant selectors accessible?
Use radios or a select with clear labels; announce price/stock updates with a polite live region.

Do apps often break accessibility?
Yes—especially popups, carousels, sticky bars, and variant widgets. Test every app and patch or replace as needed.

Is an accessibility toolbar enough?
No. Toolbars like Adjustable add control and comfort; structural issues (labels, focus, semantics) still require fixes in your theme/liquid.

Next steps

• Audit one collection and one product template with the checklist.

• Fix variant selectors, announcements, and mini-cart focus handling.

• Review your app stack on staging; remove or remediate blockers.

• Install Adjustable to support diverse shoppers while you iterate.