Shopify accessibility in Australia: WCAG 2.2 and the Disability Discrimination Act

People shop with screen readers, switch devices, voice control, magnifiers, captions and a keyboard instead of a mouse. Some of those people have a permanent disability, some have a temporary injury, and some are simply on a phone in bright sun. A store that works for all of them loses fewer sales and generates fewer support emails.

Accessibility is also easier to build in than to retrofit. If you are choosing a theme, ask about it before you buy, using our guide to choosing a Shopify theme. If you already have a store, an audit followed by fixes is a normal part of our Shopify store design and custom theme work.

The Disability Discrimination Act 1992 is the Commonwealth law that makes disability discrimination unlawful in areas of public life, including the provision of goods and services. The Australian Human Rights Commission has published guidance on how that applies to websites. Its World Wide Web Access advisory notes, version 4.1 from 2014, link to WCAG 2.0, and commentators generally describe the recommended level as AA.

• The Commission's advisory notes are guidance, not a standalone law. They explain how the Commission sees the Act applying to web content.
• The Commission has been reviewing and updating that guidance. Its page on the notes points to newer guidelines on equal access to digital goods and services, so check the Commission's site for the current version before you rely on any older document.
• A person who thinks they have been discriminated against can make a complaint to the Commission, which tries to resolve it by conciliation.
• WCAG 2.2 is a newer version of the same standard. Sites that meet 2.2 AA also meet the earlier 2.0 and 2.1 AA requirements, apart from the retired parsing criterion, which is why most agencies now build to 2.2.

We are not lawyers, and what the Act requires of a particular business depends on its circumstances. What we can say is that building to WCAG 2.2 Level AA is the standard practice and the safest target for an Australian store, and that it improves the experience for everyone.

WCAG groups its rules under four ideas: content must be perceivable, operable, understandable and robust. Each rule is a success criterion at level A, AA or AAA. Most targets and laws aim for AA.

What is new in WCAG 2.2

WCAG 2.2 became a W3C Recommendation on 5 October 2023. It added criteria and retired one. The ones that matter most for shops are these.

• 2.4.11 Focus Not Obscured (Minimum), Level AA. A focused item must not be fully hidden by other content. A sticky header or cookie banner covering the focused link is the classic failure.
• 2.5.7 Dragging Movements, Level AA. Anything that needs dragging, such as a price slider, also needs a simple alternative.
• 2.5.8 Target Size (Minimum), Level AA. Pointer targets should be at least 24 by 24 CSS pixels, with listed exceptions. Tiny close icons and quantity buttons often fail.
• 3.3.7 Redundant Entry, Level A. Do not make people retype information they already gave in the same process.
• 3.3.8 Accessible Authentication (Minimum), Level AA. Logging in should not depend on a cognitive test such as remembering a password with no way to paste or use a password manager.
• 3.2.6 Consistent Help, Level A. Help links and contact options should stay in the same place across pages.
• 4.1.1 Parsing was retired in 2.2 and no longer needs testing.

Shopify publishes an accessibility conformance report for its Dawn theme, and Shopify's help centre warns that following its guidelines does not guarantee a fully accessible store. That matches what we see. A well-built theme gives you a start. Your colours, photos, apps, content and customisations then decide the result.

• Themes: check the theme developer's accessibility statement and test the demo with a keyboard before you buy. Dawn is the reference free theme, but customisations can break it.
• Checkout: Shopify hosts and maintains checkout, so you have less control over it. Test it anyway, and test any checkout extensions you add.
• Content: you control alt text, headings, link text, colour choices, captions and PDF files. That is where much of the work sits.
• Apps: each app that injects widgets, popups or buttons adds its own accessibility risk, which you inherit.
• Custom code: a custom theme can be built accessibly from the start, as in our Custom package, or can break things if built without testing.

• Missing or useless alt text. Product images with no alt, or with a file name such as IMG_4421. Decorative images should have empty alt text. Informative images should describe what matters.
• Low contrast. Light grey text on white, or white text on a pale photo, is hard to read. Banners with text over images are frequent offenders.
• No visible keyboard focus. Some designs remove the focus outline for looks. Keyboard users then cannot tell where they are.
• Sticky headers hiding focus. When tabbing down a page, the focused element slides under a fixed header or announcement bar.
• Mega menus that only open on hover. Keyboard and touch users cannot reach the links.
• Small tap targets. Quantity steppers, close buttons, colour swatches and filter checkboxes below 24 pixels fail WCAG 2.2.
• Variant swatches with no text. Colour swatches that only show colour and have no accessible name leave screen reader users guessing.
• Carousels and autoplay. Moving content that cannot be paused, or sliders without clear controls, cause trouble for many people.
• Heading structure used for looks. Skipping from H1 to H4 because H4 looks right confuses screen reader users.
• Form fields without labels. Newsletter fields with only a placeholder lose their label when you start typing.
• Colour as the only signal. A red border alone for errors, or sold out shown only by a grey swatch.

• Popups and email capture that trap focus or cannot be closed with the Escape key.
• Chat widgets that float over content, have no accessible name or cannot be reached with a keyboard.
• Review widgets with star ratings shown only as images, with no text alternative.
• Size guide and quick view modals that open without moving focus into them or returning focus on close.
• Cookie banners that cover the page or hide the focused element.
• Accessibility overlay apps that promise instant compliance. Overlays do not fix underlying code problems. Fix the theme instead.
• Subscription and bundle widgets with unlabelled buttons and radio groups. Our subscriptions guide covers choosing one.

Before installing an app, open its demo store and try the widget using only the keyboard. Remove apps you no longer use, which also helps speed.

1. Step 1

   Run an automated scan

   Use a free tool such as the axe browser extension or Lighthouse in Chrome on your home, a collection, a product page, the cart and the contact page. Automated tools catch a share of issues, such as missing alt text and contrast, but not all.

2. Step 2

   Unplug the mouse

   Use only the Tab, Shift+Tab, Enter, Space and arrow keys. Can you open the menu, filter a collection, choose a variant, add to cart and reach checkout? Is the focus outline always visible? Does a sticky header hide it?

3. Step 3

   Try a screen reader

   Use VoiceOver on a Mac or iPhone, or NVDA on Windows. Listen to a product page. Are the product name, price, options and button announced sensibly?

4. Step 4

   Zoom and resize

   Zoom the browser to 200 percent and check the page still works without sideways scrolling. Try your text at a larger system size on a phone.

5. Step 5

   Check colour and meaning

   Check text contrast with a contrast checker. Check that errors and sold out states are shown with text or icons, not just colour.

6. Step 6

   Test forms and checkout

   Submit forms with errors on purpose. Are the errors clear and attached to the right field? Complete a test order using only a keyboard.

7. Step 7

   Fix, retest and write it down

   Log issues by page and severity, fix the highest impact ones first, and retest. Add accessibility to your checklist for every new section or app. Our Care and Growth plans can include this as monthly maintenance.

Publish a short accessibility page that says what standard you aim for, what you know is not yet fixed, and how to contact you. Do not claim full compliance unless an audit supports it. An honest statement with a working contact route is more useful than a badge. Link it from the footer and from the contact page so a shopper who hits a problem can tell you.