Before and after: fixing a customised Shopify theme

Results

Automated check with axe-core against WCAG 2.2 AA rules:

1. Shoppers could not choose a colour

Blocks purchaseWCAG 2.1.1 KeyboardWCAG 4.1.2 Name, Role, Value

The colour swatches were plain shapes that only responded to a mouse click, and the original drop-down was hidden. Keyboard and screen reader users could not select a colour, so they could not buy any product with colour options.

What we changed

• Swatches are now real buttons grouped as a radio group labelled "Color".
• Each swatch has a name, so a screen reader announces Dawn, radio button, checked instead of nothing.
• Arrow keys move between colours; the hidden drop-down stays in sync, so the variant, price and stock update as before.

2. The newsletter popup left keyboard users stuck

WCAG 2.1.1 KeyboardWCAG 2.4.3 Focus OrderWCAG 4.1.2 Name, Role, Value

The popup covered the page, but keyboard focus stayed on the page behind it. The close "×" could only be clicked with a mouse, Escape did nothing, and the subscribe button had no name.

What we changed

• The popup is now a proper dialog: focus moves into it, stays inside while it is open, and returns to where the shopper was when it closes.
• The close control is a real button named "Close", and Escape closes the popup.
• The email field has a label and the subscribe button is named "Subscribe".
• The popup appears once per visit instead of on every page.

3. Keyboard focus was invisible

WCAG 2.4.7 Focus Visible

A single line of custom CSS removed the focus outline from every element. People who navigate with a keyboard could not see where they were on the page. See the product page screenshots above.

We replaced it with a clear focus ring that appears only for keyboard navigation, so mouse users see no change to the design. On product cards the ring is drawn inside the card, so neighbouring cards cannot hide it.

4. Icon buttons and links had no names

WCAG 4.1.2 Name, Role, ValueWCAG 2.4.4 Link Purpose

The heart icons on product cards and the social media icons looked fine, but a screen reader could only announce them as button and link.

5. Text and buttons were too faint to read

WCAG 1.4.3 Contrast (Minimum)

Light grey text and white text on light orange buttons were hard to read, especially on phones outdoors and for people with low vision. WCAG asks for a contrast ratio of at least 4.5:1 for normal text.

We kept the orange brand colour and changed only the text colour on top of it.

6. The home page banner was invisible to screen readers and keyboards

WCAG 1.1.1 Non-text ContentWCAG 2.1.1 Keyboard

The banner image had no text alternative, and the "Shop now" button was a decorated piece of text that only reacted to mouse clicks. We added a text alternative and turned "Shop now" into a real link.

7. Prices were marked up incorrectly by the theme

WCAG 1.3.1 Info and Relationships

The theme wrapped prices in list markup that was structured incorrectly, which can confuse screen readers. We replaced it with simple, valid markup without changing how prices look.

How we test

• Automated check with axe-core, the open-source engine behind many accessibility tools, against WCAG 2.2 AA rules.
• Keyboard-only walkthrough of the shopping path: home, collection, product, variant selection, cart.
• Screen reader review of the names, roles and states of buttons, links and form fields.
• Regression check after every fix: variants, prices, cart and mobile layout still work.