skiplink
Accessibility repair report
No. EX-0001 · example
Example store (anonymised)
Paid Theme Store theme, customised by a previous developer, duplicated as “Live theme, a11y fixes”
Result at a glance
5/5agreed problems fixed and retested
- 7 further problems found, each with a written price
- 2 issues outside the theme, written up for you
1 Summary
| ID | What the shopper ran into | Before | After |
|---|---|---|---|
| R1 | A keyboard shopper cannot reach Checkout.Cart drawer | Fail | Pass |
| R2 | A keyboard shopper cannot see where they are and cannot get back to the store.Cart drawer | Fail | Pass |
| R3 | A screen-reader shopper cannot tell which icon opens the cart.Header | Fail | Pass |
| R4 | A screen-reader shopper hears a list of identical links.Product cards | Fail | Pass |
| R5 | A keyboard shopper loses track of where they are on the page.Focus | Fail | Pass |
2 Findings and fixes
R1: Cart drawer
/products/linen-overshirt
WCAG 2.4.3 Focus Order, level A
Before Fail, Day 1
After pressing “Add to cart”, focus stays on the button behind the drawer. We pressed Tab 45 more times and it never reached the drawer.
Effect on the shopper: A keyboard shopper cannot reach Checkout.
After Pass, Day 5
Focus moves to the drawer heading on open, Tab is kept inside the drawer, focus returns to “Add to cart” on close.
Retested with: keyboard, NVDA and VoiceOver
Files changed
assets/cart-drawer.jssnippets/cart-drawer.liquidR2: Cart drawer
/products/linen-overshirt
WCAG 2.4.11 Focus Not Obscured (Minimum), level AA, and 2.4.3 Focus Order, level A
Before Fail, Day 1
Escape does not close the open cart drawer, and Tab moves on to links hidden behind it.
Effect on the shopper: A keyboard shopper cannot see where they are and cannot get back to the store.
After Pass, Day 5
Escape closes the drawer, the page behind it is made inert while it is open, and focus returns to the button that opened it.
Retested with: keyboard, NVDA and VoiceOver
Files changed
assets/cart-drawer.jsR3: Header
All pages
WCAG 4.1.2 Name, Role, Value, level A
Before Fail, Day 1
Cart, search and account icons are buttons with no accessible name. A screen reader announces “button”.
Effect on the shopper: A screen-reader shopper cannot tell which icon opens the cart.
After Pass, Day 5
Named the buttons, including the live item count on the cart button.
Retested with: keyboard, NVDA and VoiceOver
Files changed
sections/header.liquidR4: Product cards
/collections/all
WCAG 2.4.4 Link Purpose (In Context), level A, and 1.1.1 Non-text Content, level A
Before Fail, Day 1
16 product-card links contain only an image with empty alt text, so they are announced as “link”.
Effect on the shopper: A screen-reader shopper hears a list of identical links.
After Pass, Day 5
Card links take the product title as their name; image alt text is set from the product media alt.
Retested with: keyboard, NVDA and VoiceOver
Files changed
snippets/card-product.liquidR5: Focus
Home, product
WCAG 2.4.7 Focus Visible, level AA
Before Fail, Day 1
18 controls, including the slideshow arrows and newsletter button, show no visible change when focused.
Effect on the shopper: A keyboard shopper loses track of where they are on the page.
After Pass, Day 5
Added a visible focus style that meets 3:1 contrast against the theme colours.
Retested with: keyboard, NVDA and VoiceOver
Files changed
assets/base.csssections/slideshow.liquid
3 How we tested
Tools
- Keyboard only current Chrome
- NVDA 2025.3 with Firefox, Windows
- VoiceOver iOS 26, Safari
- axe-core 4.10 automated rules
What we tested
- Home page, one collection page, three product pages, search results
- Cart drawer, opened from each product page
- Header, menu and footer, on every page above
- Desktop at 1440 pixels wide, and iPhone
Not tested
- Checkout and account pages, which Shopify controls
- Pages not listed here
Every problem was confirmed by two separate checks before the fix and retested by hand after it.
4 Outside the theme
- Reviews widget. Some of its controls show no focus. They live inside the vendor’s frame, so we wrote them up for the vendor.
- Checkout. Shopify builds and controls these pages, so they were not changed.
5 Further problems, priced
Found in the audit but outside the five. Nothing here is done unless you ask for it.
| ID | Problem | Price |
|---|---|---|
| A1 | Colour swatches on product pages can’t be chosen with the keyboardWCAG 2.1.1 Keyboard, A | $180 |
| A2 | The mobile menu doesn’t return focus to the menu button when it closesWCAG 2.4.3 Focus Order, A | $180 |
| A3 | The home slideshow moves on its own and has no pause buttonWCAG 2.2.2 Pause, Stop, Hide, A | $180 |
| A4 | The newsletter field has no label a screen reader can readWCAG 1.3.1 Info and Relationships, A | $90 |
| A5 | Footer social links are icons with no nameWCAG 2.4.4 Link Purpose, A | $90 |
| A6 | “Sort by” text is too faint against white (3.3 to 1)WCAG 1.4.3 Contrast (Minimum), AA | $90 |
| A7 | The number of search results isn’t announcedWCAG 4.1.3 Status Messages, AA | $90 |
Prices here are an example. Yours are written for your theme.
Got a demand letter?