Accessibility

Shopify Accessibility & WCAG 2.1 AA

We build Shopify themes to WCAG 2.1 AA — semantic HTML, ARIA where it's actually needed, full keyboard operation, visible focus states and checked colour contrast. Inclusive for every shopper, defensible legally, and better for SEO.

Book a Free Technical Call
Shopify accessibility — WCAG 2.1 AA audit showing keyboard navigation, contrast and screen-reader checks

Why it matters

Accessibility is a revenue, risk and ranking issue — not a checkbox.

Roughly one in five people has a disability, so an inaccessible storefront quietly turns away a meaningful share of your market before they ever reach checkout. It's also the fastest-growing category of ecommerce litigation, and most claims come down to the same handful of failures: unlabelled buttons, keyboard traps in modals, and text that doesn't meet contrast. The same fixes happen to help everyone — proper semantics and heading structure are exactly what screen readers and search crawlers both rely on. Done during the build it costs very little; retrofitted after a complaint it's expensive and rushed.

Sound familiar?

Accessibility problems announce themselves long before a lawyer does.

You can check most of these yourself in ten minutes with no tooling at all. Put the mouse down and try to buy something.

  • You've never once tried to complete a purchase on your own store using only a keyboard.
  • Tabbing into the cart drawer leaves focus stranded behind it, with no way back out.
  • Your palette leans on light grey text, and nobody wants to be the one raising it.
  • A customer has emailed to say your store doesn't work with their screen reader.
  • Your theme came from a premium marketplace, so you assumed this was already handled.
  • Product image alt text is either missing or reads like a camera filename.

What's included

What WCAG 2.1 AA work covers

Accessibility engineered into the theme and verified with automated tooling plus manual testing — because automation only catches about a third of real issues.

Semantic HTML & ARIA

Proper landmarks, a single logical heading hierarchy, real buttons and links rather than clickable divs, and ARIA used only where native semantics fall short. This is the foundation screen readers depend on — and it's also what gives search engines a clean structural map of the page.

Full keyboard operation

Every interactive element is reachable and operable by keyboard alone, in a sensible tab order. Modals and drawers trap focus while open, return it where it came from on close, and respond to Escape — the single most common failure we find in premium themes.

Visible focus & contrast

Focus indicators that are actually visible against every background, body text meeting the 4.5:1 contrast ratio and large text 3:1, and no information conveyed by colour alone. We check contrast against your real brand palette and flag combinations that can't pass before design is signed off.

Accessible commerce flows

Variant pickers announce their state, cart updates are announced via live regions, form fields have persistent labels and errors tied programmatically to their inputs, and product images carry meaningful alt text. The checkout path is tested end to end with a screen reader.

Audited & documented

Axe and Lighthouse automated passes on every key template, plus manual keyboard and screen-reader QA (VoiceOver/NVDA). You receive a written accessibility report at launch showing what was tested, what passed, and any known limitations — useful evidence if you're ever challenged.

Keeping it accessible

We add editor guidance so your team doesn't reintroduce problems — alt-text fields on image sections, contrast-safe colour presets, and heading levels that can't be chosen arbitrarily. Accessibility fails over time when content editing has no guardrails.

How it runs

How accessibility work actually runs.

Two to four weeks to audit and remediate an existing theme. Built in from the first commit on a new build, it adds very little.

  1. 01

    Audit against AA

    Automated passes on every key template, then manual testing of the paths that carry revenue: search, collection, product, cart. Findings come back ranked by severity and by how many shoppers each one blocks.

  2. 02

    Fix the blockers

    Focus traps, unlabelled controls, unreachable interactions and failing contrast go first, because those stop someone completing an order outright. Cosmetic findings wait their turn rather than consuming the budget.

  3. 03

    Retest by hand

    Every fix is re-verified with a keyboard and with a screen reader, all the way to a completed order. A passing scan and a usable store are not the same claim.

  4. 04

    Hand over guardrails

    You get the report plus a short publishing checklist for whoever adds content. Most regressions we see arrive through a new campaign banner or a duplicated section, not through code.

WCAG 2.1

AA conformance

Target standard

4.5:1

Text contrast

Minimum ratio

100%

Keyboard operable

No mouse required

Axe + manual

Testing method

Automation misses ~2/3

Straight answer

Worth doing properly, or not worth claiming at all.

A good fit if…

  • You're building or redesigning now, when conformance costs a fraction of retrofitting it later.
  • You sell into markets where accessibility claims are common and you'd rather reduce that exposure.
  • You're a public body, an enterprise supplier, or answering procurement questionnaires that ask for conformance.
  • You'd simply like more people to be able to buy from you.

Probably not, if…

  • You want a guarantee you can't be sued. Conformance reduces risk; no one can promise immunity.
  • You want a badge for the footer more than the markup underneath actually fixed.
  • Core parts of your store are third-party app markup we can neither change nor replace.
  • Nobody on your side will own alt text and content standards once we hand over.

Keep exploring

More on Shopify theme development

Accessibility (WCAG 2.1 AA) is one part of how we build Shopify themes. Here's the rest of the picture.

The full service

Shopify Theme Development

The complete service — design, build, launch and everything below, in one engagement.

View the serviceClosely related

Mobile-First Responsive Design

Touch targets, focus states and legibility — where most themes quietly fail WCAG.

Read the guideClosely related

Custom Theme Development

Accessibility is cheapest when it's built in from the first commit, not retrofitted.

Read the guide

All guides in this series

Beyond this service

Other things we do

Most stores need two or three of these working together. Book a call and we'll tell you which ones actually move your numbers.

View all services

Frequently asked questions

  • The ADA itself sets no technical standard for websites, which is why nobody can hand you a certificate. In practice, WCAG 2.1 AA is the benchmark US courts, settlements and procurement teams reference, so building to AA is how you demonstrate you took reasonable steps. The same applies to the European Accessibility Act, the UK Equality Act and AODA in Ontario — they point at the same underlying standard.

Is your store usable by everyone?

Book a 30-minute technical call. We'll run an accessibility pass on your key templates and show you the highest-risk issues first.

Book a free call