Shopify Accessibility: Product Pages & App Conflicts

Why This Matters (Conversion + SEO)

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

• User-friendly filters and forms minimize drop-offs during category browsing and checkout.

• Consistent layouts and semantic markup enhance Core Web Vitals and visibility.

Theme Audit: Start Here

• Ensure one H1 per template; use logical H2/H3s; include landmarks (header, nav, main, footer).

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

• Ensure Visible focus styles; avoid removing outlines globally.

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

If your theme relies on hover-only menus or div-as-button patterns, address those first—they affect every page.

Product Pages: Patterns That Sell (and Include Everyone)

Media & Alt Text

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

• Use alt="" for decorative thumbnails.

• Ensure video captions; make sure GIFs/auto-play accommodate reduced motion.

Title, Price, Stock

• Use H1 for the title; display price and stock as live text (not images).

• Announce price/stock changes as variants change (use 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 should be form controls (checkboxes, radios, select) with labels.

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

• Use more than color (icons/text) for selected states.

• Offer Clear All as a clearly labelled button.

• If using infinite scroll, prefer Load More or announce new items.

Cart, Mini-Cart, and Drawers

• Utilize <button> for actions and inputs for quantity; ensure controls are labeled.

• Mini-cart drawers should be proper dialogs: focus moves inside, is trapped, and returns to trigger upon closing.

• Announce updates such as line items added/removed, totals changed, free-shipping threshold achieved.

Checkout Forms: Labels, Errors, Validation

• Ensure every field has a visible label; use <fieldset><legend> for groupings.

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

• Place Error Summary at the top linking to fields; focus goes to the first error.

• Utilize 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 obscures it.

• Use variant widgets labelled as unclassified divs; prevent keyboard traps in modals/drawers.

• Avoid auto-playing carousels without a pause; avoid color-only states.

Mitigations

• Test new apps on staging using both keyboard + screen reader.

• Wrap application elements with labels/roles; implement focus management.

• Provide Pause/Close actions and respect reduced motion.

• If an app cannot be fixed, replace it.

Adjustable’s Page Options allow users to hide images/animations or highlight links when a third-party UI becomes too intensive—lessening friction while remediation occurs.

Performance & Stability (Core Web Vitals)

• Pre-size images; implement lazy-load for below-the-fold media; utilize modern formats.

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

• Minimize app/script count; eliminate unused features.

Quick Testing Flow (12–15 Minutes)

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

2. Focus Visibility: Ensure focus visibility at all times; avoid 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: Ensure target sizes, reflow at 320 px, zoom-enabled; avoid sticky UI obstructing 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/Color Modes to enhance comprehension on dense product pages.

• Reading Ruler, Cursor Adjustment, Screen Mask to aid focus on lengthy descriptions or forms.

• Page Options to scale pages, hide images/animations, and highlight links—valuable when third-party widgets become visually overwhelming.

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

• Configurable toolbar/widget placement to fit your theme.

Try Adjustable

FAQs

Which Shopify Themes Are Most Accessible?
Select well-maintained, semantic themes and audit keyboard focus, contrast, and variant selectors prior to launch.

How Do I Make Variant Selectors Accessible?
Use radios or a select with clear labels; announce price/stock updates utilizing a polite live region.

Do Apps Often Disrupt Accessibility?
Yes—particularly popups, carousels, sticky bars, and variant widgets. Test each app and patch or replace as necessary.

Is An Accessibility Toolbar Enough?
No. Tools like Adjustable enhance control and comfort; structural issues (labels, focus, semantics) still require corrections in your theme/liquid.

Next Steps

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

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

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

• Install Adjustable to help support a diverse range of shoppers while making improvements.