Sample audit report

Summary

We found 12 issues across the six pages we tested: 3 critical, 5 serious, 3 moderate and 1 minor.

The most urgent problems are on the way to checkout. Keyboard users can't get into the cart drawer, screen reader users can't tell which size they've chosen, and the quantity buttons have no names. Fixing the first five items on the fix list removes every blocker we found, and most are small changes to the theme.

What's already working

• Every page sets its language, and product pages have clear, logical headings.
• A "Skip to content" link is the first thing on every page.
• Shopify's checkout labels its fields and reads out its errors correctly.
• Decorative images in the footer are correctly hidden from screen readers.

What we tested and how

• Pages: home page; the "Pantry staples" collection; the "Smoked sea salt" product; cart drawer and cart page; checkout up to the payment step; customer account sign-in and order history.
• Automated tests: axe-core 4.14 on every page, in each state we reached (menus open, drawer open, errors showing).
• Keyboard: every task done with a keyboard alone, in Chrome and Safari.
• Screen readers: NVDA with Chrome on Windows 11, and VoiceOver with Safari on an iPhone.
• Vision: zoom to 200% and 400%, a 320-pixel-wide window, contrast measured with a color picker, and Windows high-contrast mode.
• Tasks: find a product, choose a size, add it to the cart, change the quantity, reach payment, sign up for the newsletter, and sign in.

How to read this report

• Critical: stops some shoppers completely.
• Serious: makes a task very hard.
• Moderate: makes a task harder.
• Minor: gets in the way.
• Effort: small means under an hour of developer time, medium a few hours, large a day or more or ongoing content work.

Ranked fix list

Fix in this order: blockers on the way to checkout first, then quick fixes that help on every page.

Findings

HP-01 Keyboard focus stays behind the cart drawer

Critical. WCAG 2.4.3 Focus Order (A) and 2.1.1 Keyboard (A). Cart drawer, on every page.

What happens: after "Add to cart", the drawer slides in, but keyboard focus stays on the page behind it. Pressing Tab moves through hidden links under the drawer, and it took 31 presses to reach "Check out". Escape doesn't close the drawer. NVDA users hear nothing when the drawer opens.

Who it affects: keyboard users and screen reader users, at the moment they're trying to buy.

How to fix: treat the drawer as a dialog. Move focus into it when it opens, keep focus inside while it's open, close it with Escape, and return focus to the cart button afterwards.

<div id="CartDrawer" role="dialog" aria-modal="true" aria-labelledby="CartDrawer-title" hidden>
  <h2 id="CartDrawer-title" tabindex="-1">Your cart</h2> …
</div>

function openDrawer() {
  drawer.hidden = false;
  document.querySelector('main').inert = true;
  drawer.querySelector('h2').focus();
}
function closeDrawer() {
  drawer.hidden = true;
  document.querySelector('main').inert = false;
  cartButton.focus();
}
drawer.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeDrawer(); });

How to check the fix: add something to the cart using only the keyboard. Focus should land on "Your cart", Tab should stay inside the drawer, and Escape should close it and put you back on the cart button.

HP-02 Quantity buttons have no names

Critical. WCAG 4.1.2 Name, Role, Value (A). Product page and cart drawer.

What happens: the − and + buttons contain only an icon. Screen readers announce "button" with no name, so shoppers can't tell which one adds and which removes.

Who it affects: screen reader users and voice control users, who can't say a name to press them.

How to fix: in the quantity snippet, give each button a label that includes the product.

<button type="button" name="minus" aria-label="Decrease quantity for {{ product.title | escape }}">
  {% render 'icon-minus' %}
</button>

How to check the fix: with VoiceOver on, swipe to the buttons. You should hear "Decrease quantity for Smoked sea salt, button".

HP-03 Size choices aren't announced as choices

Critical. WCAG 4.1.2 Name, Role, Value (A) and 1.3.1 Info and Relationships (A). Product page.

What happens: the 4 oz, 8 oz and 16 oz options are styled boxes built from plain page elements. Screen readers read them as text, don't say which one is selected, and the keyboard can't reach them at all, so keyboard users can only buy the default size.

Who it affects: keyboard users and screen reader users.

How to fix: build the options as a group of radio buttons, styled however you like.

<fieldset>
  <legend>{{ option.name }}</legend>
  {% for value in option.values %}
    <input type="radio" id="{{ option.name | handle }}-{{ forloop.index }}" name="{{ option.name | escape }}"
      value="{{ value | escape }}" {% if option.selected_value == value %}checked{% endif %}>
    <label for="{{ option.name | handle }}-{{ forloop.index }}">{{ value }}</label>
  {% endfor %}
</fieldset>

How to check the fix: Tab to the sizes, use the arrow keys to change size, and check NVDA says "8 oz, radio button, checked, 2 of 3".

HP-04 Product photos have no descriptions

Serious. WCAG 1.1.1 Non-text Content (A). Home page, collection and product pages.

What happens: 126 of 140 product photos have no alt text, so screen readers either skip them or read the file name, such as "IMG_4471 underscore final dot jpg".

Who it affects: screen reader users, who can't tell what a product looks like or what size the jar is.

How to fix: in Shopify admin, open each product, select each photo and choose "Add alt text". Describe what a shopper needs to know, for example "8 oz glass jar of smoked sea salt with a cork lid". Start with your 20 best sellers. The theme already uses the alt text you enter, so no code change is needed.

How to check the fix: run the free scan again, or listen to a product page with VoiceOver.

HP-05 The pop-up can't be closed with a keyboard

Serious. WCAG 2.1.1 Keyboard (A) and 4.1.2 Name, Role, Value (A). Newsletter pop-up on the home page.

What happens: five seconds after the page loads, a "10% off" pop-up covers the page. Focus doesn't move to it, its close button is a "×" with no name, and Escape does nothing. Keyboard users carry on tabbing through the page underneath without being able to see where they are.

Who it affects: keyboard users, screen reader users and people using zoom, for whom the pop-up fills the screen.

How to fix: in the pop-up app's settings, turn on its accessible mode if it has one, or replace it. The pop-up needs to move focus to itself, have a close button named "Close", close on Escape and return focus where it was. Showing it only after a shopper scrolls halfway down the page also helps.

HP-06 Promo bar and badges are hard to read

Serious. WCAG 1.4.3 Contrast (Minimum) (AA). Every page.

What happens: the "Free shipping over $50" bar is white text on peach (#F4A582), a contrast of 2.0 to 1. The "Sold out" badge is grey (#9E9E9E) on white, 2.7 to 1. Normal-size text needs at least 4.5 to 1.

Who it affects: people with low vision, older shoppers, and anyone on a phone outside.

How to fix: in Theme settings, change the announcement bar to white on a darker clay such as #8A3B12 (7.7 to 1), and the badge text to #595959 or darker.

HP-07 The sticky header hides the focused item

Serious. WCAG 2.4.11 Focus Not Obscured (Minimum) (AA), new in WCAG 2.2. Every page.

What happens: when tabbing up the page, links slide underneath the sticky header, so keyboard users can't see what's focused.

Who it affects: keyboard users, especially when zoomed in.

How to fix: add scroll padding equal to the header's height to the theme's CSS.

html { scroll-padding-top: 6rem; }

HP-08 Filter results aren't announced

Serious. WCAG 4.1.3 Status Messages (AA). Collection page.

What happens: ticking a filter, such as "Gluten free", updates the products without reloading the page. Screen reader users aren't told that anything changed or how many products are now showing.

How to fix: put the product count in a status region and update its text after filtering.

<p id="ProductCount" role="status">18 products</p>

HP-09 Sale prices are read without context

Moderate. WCAG 1.3.1 Info and Relationships (A). Collection and product pages.

What happens: the old price is shown crossed out, but screen readers just read "$14.00 $11.00", with no way to tell which is the sale price.

How to fix: add hidden labels before each 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 }}

HP-10 Form errors are shown only in red

Moderate. WCAG 3.3.1 Error Identification (A) and 1.4.1 Use of Color (A). Newsletter sign-up and account sign-in.

What happens: if an email address is mistyped, the field's border turns red and nothing else changes. Screen readers say nothing, and people who can't see red can't tell what went wrong.

How to fix: show a written message, connect it to the field, and mark the field as invalid.

<input id="Email" type="email" aria-invalid="true" aria-describedby="Email-error">
<p id="Email-error">Enter an email address like name@example.com</p>

HP-11 Zoom is blocked on phones

Moderate. WCAG 1.4.4 Resize Text (AA). Every page.

What happens: the theme stops shoppers pinching to zoom on Android phones.

How to fix: in layout/theme.liquid, remove maximum-scale=1 from the viewport tag.

<meta name="viewport" content="width=device-width, initial-scale=1">

HP-12 Color swatches are too small to tap

Minor. WCAG 2.5.8 Target Size (Minimum) (AA), new in WCAG 2.2. Product page.

What happens: the label color swatches are 18 by 18 pixels with 4 pixels between them, so it's easy to tap the wrong one.

How to fix: make each swatch at least 24 by 24 pixels, or add space around them.

Draft accessibility statement

Paste this into a new page in Shopify (Online Store, then Pages), and update it as you fix things.

Next steps

• We'll walk you through this report on a 30-minute call.
• Your developer can make the fixes using the notes above, or we can make them in a fix sprint, with a fixed quote.
• After the fixes, we re-test the six pages and update your fix list.

This report describes the pages we tested, on the dates shown. It isn't legal advice, and it doesn't certify that the store meets any law.

Book your audit for $990