Sample report: Fernwood Supply Co.
This is what you get with a theme fix: what we found, what we changed and what still needs your attention.
Fernwood Supply Co. is a made-up store. The issues and fixes are typical of what we find on Shopify themes, but the numbers are an example.
Summary
- Issues found
- 68
- Fixed in the theme
- 64
- Need your attention
- 4
Pages scanned: home, a collection, a product and the cart, on desktop and mobile. Tested with axe-core and by keyboard. Theme: Dawn 15.
Issues by type
| Issue | WCAG criterion | Before | After |
|---|---|---|---|
| Images without alt text | 1.1.1 Non-text content | 22 | 0 |
| Text below contrast minimum | 1.4.3 Contrast | 17 | 0 |
| Buttons and links with no name | 4.1.2 Name, role, value | 14 | 0 |
| Form fields without labels | 3.3.2 Labels or instructions | 6 | 0 |
| Cart drawer traps keyboard focus | 2.1.2 No keyboard trap | 1 | 0 |
| Skipped heading levels | 1.3.1 Info and relationships | 4 | 0 |
| Issues inside third-party apps | Various | 4 | 4 |
Example fixes
The cart drawer trapped keyboard users
Once the cart drawer opened, pressing Escape did nothing and focus stayed behind the drawer. Keyboard users couldn't reach the checkout button. It now moves focus into the drawer, closes with Escape and returns focus to the cart button.
Before: open() { this.classList.add('active'); }After: open(opener) { this.opener = opener; this.classList.add('active'); trapFocus(this, this.querySelector('.drawer__close')); this.addEventListener('keyup', (e) => e.code === 'Escape' && this.close()); }
Sale prices were announced without context
Screen readers read "$48 $36" with no way to tell which was the original price. Each price now has hidden text.
Before: <s>{{ compare_at_price | money }}</s> {{ price | money }}After: <span class="visually-hidden">Regular price</span> <s>{{ compare_at_price | money }}</s> <span class="visually-hidden">Sale price</span> {{ price | money }}
Grey text on the product page was too faint
The product description used light grey text with a contrast ratio of 3.1:1, below the 4.5:1 minimum. We darkened it to 7.5:1. The difference is barely visible, but it's much easier to read.
Before: "color_body_text": "#8A8A8A"After: "color_body_text": "#555555"
What still needs your attention
These issues are outside your theme's code, so we can't fix them directly. Here's what to do about each one.
- Reviews app: the star-rating filter buttons have no names. Ask the app's developer to add labels, or ask us to suggest an alternative app.
- Product video: the video on the homepage has no captions. Upload a caption file in Shopify's video settings.
- Size guide PDF: the PDF isn't tagged for screen readers. Re-export it with accessibility tags, or publish the size guide as a page.
- Chat widget: the chat button can't be reached by keyboard. Report it to the chat provider.
Automated tests don't catch everything. We also recommend testing your checkout with a screen reader once a year.
Want a report like this for your store?
Start with a free snapshot of your homepage.