Case study
Accessibility remediation: Shopify fashion store (theodosiantenti.gr)
Measured with axe-core 4.13 on five pages (home, collection, product, search, and cart) at 1280 px and 390 px. The method was the same before, on 14 October 2026, and after, on 17 October 2026.
Key numbers
| Measure | Before, 14 Oct 2026 | After, 17 Oct 2026 |
|---|---|---|
| Violation nodes | 523 | 214 |
| Critical-impact nodes | 18 | 0 |
| Distinct rules failing | 20 | 3 |
| Nodes outside contrast and landmark-region rules | 80 | 1 |
Of the 214 nodes left, 203 are colour-contrast false positives from the theme’s fade-in animations. When the scan is re-run with the animations settled, that colour-contrast count is 0. Ten are the “region” best-practice rule, from the skip link sitting outside the header. That placement is intentional. One is an intermittent best-practice duplicate landmark label. A repeat run that did not hit that label recorded 213 nodes.
Results by page
The chart is the automated before-and-after comparison. The table has the same per-page numbers. Intermediate totals on the chart were 301 on 16 October, after publish, and 218 on the morning of 17 October. The settled re-run totals 11 nodes: the 10 region findings and the 1 intermittent duplicate label. Colour-contrast in that re-run is 0. There is no settled baseline for the original theme. These are automated results only.
| Page | Before, 1280 px | After, 1280 px | Before, 390 px | After, 390 px |
|---|---|---|---|---|
| Home | 22 | 2 | 17 | 3 |
| Collection | 81 | 45 | 85 | 57 |
| Product | 40 | 9 | 52 | 10 |
| Search | 81 | 38 | 89 | 46 |
| Cart | 27 | 2 | 29 | 2 |
Context
theodosiantenti.gr (opens in a new tab) is a Shopify store on the Ella theme. The target was WCAG 2.2 AA.
There is no overlay and no widget. The fixes are in the theme code: one JavaScript file and one CSS file of numbered fixes (F01–F28), plus content fixes for alternative text, colours, and section settings.
This is my wife Theodosia's store; published with her consent.
Before and after
Five comparisons from the 14 October and 17 October audits. Each figure shows the screenshot and states the measured difference. The left half is before and the right half is after.
Skip link
Before, 14 Oct 2026. On focus, the skip link measured 130×1 px, so it was effectively invisible.
After, 17 Oct 2026. The skip link measures 208×37 px and is visible. Its label is Μετάβαση στο Περιεχόμενο, and it targets the main content.
Sale price contrast
Before, 14 Oct 2026. The sale price colour #e95144 measured 3.66:1.
After, 18 Oct 2026. The sale price colour #b3261e measures 6.15:1 against #f8f8f8.
Focus on navigation
Before, 14 Oct 2026. Navigation and buttons used no outline, so keyboard focus was not visible.
After, 17 Oct 2026. Theme controls use a solid 2–3 px focus indicator plus a shadow. In this comparison the indicator is on Clothing.
Mobile menu
Before, 14 Oct 2026. The menu button’s accessible name was the English word “menu”. It did not expose an expanded state, focus was not trapped, and Escape did not close it.
After, 17 Oct 2026. The accessible name is the Greek word Μενού. The button exposes expanded and controls. Focus moves to the close control, Tab stays inside, and Escape closes the menu and returns focus to the menu button.
Search
Before, 14 Oct 2026. On desktop, focus stayed on the search summary and Tab moved on to the slider.
After, 17 Oct 2026. Focus moves to the search field. Tab stays on the field, the search button, and close. Escape returns focus to the summary.
Method
axe-core 4.13, with WCAG 2.0–2.2 A and AA plus best-practice rules, on 5 pages at 1280×800 and 390×844. The same method was used before (14 October 2026, original theme) and after (17 October 2026, live theme).
Automated tools catch only part of real-world issues, so keyboard, focus, motion, and contrast were also checked with scripted tests. I tested each proposed fix first by overriding the fix files in an automated browser (Playwright request interception). The store owner then applied it in the theme editor. I re-verified it on the live site with cache-busted requests.
- Breadcrumb contrast went from 2.68:1 (#999 on #f8f8f8) to 7.96:1 (#4d4d4d).
- The cart drawer, mobile menu, desktop search, mobile search, and mobile product-tab popups now move focus inside, keep Tab inside, close on Escape, and return focus to the trigger.
- Pause controls were added for the slideshow, the marquee, and the video. prefers-reduced-motion is respected.
- The add-to-cart action is announced through a live region.
- Every visible image across the 10 page and width runs has meaningful alternative text.
WCAG 2.2 AA criteria
Thirteen criteria are Pass. The after column is the 17 October 2026 check, except 2.4.6 Headings and Labels and 3.1.2 Language of Parts, which were Partial that day and were verified Pass live on 18 October 2026. 2.1.2 was a fail before because focus could leave the modals. Focus now stays inside until Escape closes the dialog and returns focus to the trigger.
On the 18 October check for 2.4.6:
- The cart drawer edit button’s accessible name is now Επεξεργασία …. It had been mislabelled Αφαιρώ ….
- Visually hidden labels now expose accessible names: the search field is Αναζήτηση, and the newsletter field is Το email σας.
- The cart drawer quantity label is fixed. It had been a missing-translation string.
- Theme demo blocks with placeholder headings were removed from the search results sidebar.
On the 18 October check for 3.1.2, English interface words stay in English because they are familiar to Greek shoppers. They are now marked lang="en", with no visible change. Proper names, including product and collection names, are intentionally left untagged.
- Navigation and the mega menu: Clothing, Collections, Bazaar, Blog, and the category names.
- Section headings: Trending Now, Sportswear, Customers are saying, Newsletter Sign Up, and Styling Tips.
- The mobile bottom bar.
- Badges: New and Sold out.
- Filters and sort.
- The Checkout and Wishlist buttons.
- English-only aria-labels.
The Shopify-hosted checkout shipping rate name “Shipping” is a documented exception outside the theme. Checkout does not load theme code, so that name cannot receive a lang attribute.
| Criterion | 14 Oct 2026 | After |
|---|---|---|
| 1.1.1 Non-text Content | Fail | Pass |
| 1.3.1 Info and Relationships | Fail | Pass |
| 1.4.3 Contrast (Minimum) | Fail | Pass |
| 2.1.1 Keyboard | Fail | Pass |
| 2.1.2 No Keyboard Trap | Fail | Pass |
| 2.2.2 Pause, Stop, Hide | Fail | Pass |
| 2.4.1 Bypass Blocks | Partial | Pass |
| 2.4.3 Focus Order | Fail | Pass |
| 2.4.6 Headings and Labels | Fail | Pass |
| 2.4.7 Focus Visible | Fail | Pass |
| 3.1.2 Language of Parts | Partial | Pass |
| 4.1.2 Name, Role, Value | Fail | Pass |
| 4.1.3 Status Messages | Fail | Pass |
1.4.10 Reflow passed in the 14 October 2026 audit and was not re-tested.
Screen reader testing
On 18 October 2026, Marios completed a manual VoiceOver test with an 18-step VoiceOver checklist. All steps passed. It was run with VoiceOver in Safari on iPhone. The mega menu and slideshow pause steps were run on Mac Safari.
The checklist covered:
- Headings and landmarks (rotor)
- Announcement bar pause control
- Video slideshow (labels, play and pause)
- Slideshow arrows and dots
- Mobile menu dialog (focus, expanded state, and close)
- Search dialog
- Product page description tabs
- Add to cart announcement and cart drawer
- Product cards in collections
- Mega menu image alternative text
What remains
Shopify-hosted checkout is outside the theme’s scope and, on a non-Plus plan, cannot be customised beyond the logo, colours, and fonts. This was checked live on 18 October 2026 as an anonymous guest. Nothing was submitted.
- The shipping rate name “Shipping” is kept in English by owner choice. Checkout does not load theme code, so that name cannot receive a lang attribute.
- A pre-ticked marketing checkbox. It is a GDPR concern, and it was kept by owner choice.
- Success criterion 2.5.8 Target Size (Minimum) is a platform limitation. Shopify’s own 18×18 px help icons inside the email, phone, and card security code fields sit about 9 px from their input, or overlap it. The email tooltip and the card fields are Shopify UI that cannot be changed without Shopify Plus. The phone icon goes away only by removing the phone field, which couriers and cash on delivery need. On mobile, at 390 px, axe also flags the checkout footer policy links “Privacy policy” and “Legal notice” at 22.8 px spacing against the 24 px minimum. Those links come from the store’s legal policies, which the owner keeps visible in checkout.
Want the same for your store?
I am an IAAP WAS certified Web Accessibility Specialist. I audit storefronts and fix the code.