Accessibility on Shopify: WCAG 2.2 Compliance for Australian Stores

By Claire. A Melbourne fashion brand we work with received a complaint last winter from a customer who used a screen reader. She couldn’t complete checkout because the variant selector wasn’t reachable by keyboard, and the “Add to bag” button had no accessible label. The customer was polite about it. The legal letter that followed two months later was less so. The brand spent six weeks remediating the entire store. They’ve since told us they wished they’d treated accessibility as a design requirement from day one, not a retrofit. This article is the guide we wish we’d been able to hand them.

Why WCAG 2.2 matters for Australian Shopify stores

The Web Content Accessibility Guidelines (WCAG) 2.2 were finalised by the W3C in late 2023 and have become the de facto global standard for digital accessibility. In Australia, accessibility isn’t directly legislated for private commercial websites the way it is in some US jurisdictions, but the Disability Discrimination Act 1992 (DDA) applies to the provision of goods and services online, and the Australian Human Rights Commission references WCAG as the benchmark for what reasonable accessibility looks like. The case law is sparse but growing, and the reputational risk of a public complaint is real. More importantly, around one in five Australians lives with a disability. Excluding them isn’t just a legal risk, it’s lost revenue.

WCAG 2.2 introduced nine new success criteria on top of WCAG 2.1, focused mostly on cognitive accessibility and mobile usability. The big additions for Shopify merchants include minimum target size (at least 24 by 24 pixels for interactive elements), focus appearance requirements, and consistent help availability. We’ll cover each.

Keyboard navigation: the test that catches most problems

The fastest way to audit your Shopify store for accessibility is to put your mouse down and try to complete a purchase using only the Tab, Shift+Tab, Enter, and Space keys. You should be able to navigate the menu, open product pages, select variants, add to cart, and complete checkout without ever touching the mouse. Every interactive element should be reachable in a logical order, and the currently-focused element should be visually obvious.

Common failures we see on Shopify stores:

• Mega menus that open on hover but trap keyboard focus or skip items.
• Variant pickers built with custom swatches that aren’t actually buttons (so they don’t receive focus).
• Modal dialogs (cart drawers, quick view) that don’t trap focus when open or restore focus when closed.
• Skip-to-content links that exist in the markup but are visually hidden even when focused.

Most of these are theme-level fixes. If you’re on a recent Dawn-based theme, the bones are usually decent. If you’re on a heavily customised older theme, you may need a developer to audit the components that matter most: header, product page, cart, and checkout. Staying on a current release matters here too, since older themes accumulate accessibility and performance debt — here’s how to keep your Shopify theme up to date.

Alt text: not optional, not decorative

Every meaningful image on your store needs alt text. Product photos should describe the product (“Navy linen shirt, button-down collar, long sleeves”) not just repeat the title. Decorative images, like the background pattern in your hero banner, should have empty alt text (alt=””) so screen readers skip them. Icons that convey meaning, like a magnifying glass for search, need either alt text or aria-label.

Shopify pulls product image alt text from the alt field in the admin, which most merchants leave blank. Bulk-update your existing products using a CSV export, and build a habit of writing alt text every time you upload a new image. It takes thirty seconds per product and pays back in both accessibility and SEO, because Google uses alt text as a relevance signal for image search.

Colour contrast: the silent conversion killer

WCAG 2.2 requires a contrast ratio of at least 4.5:1 for normal text against its background, and 3:1 for large text (18pt or 14pt bold and above). Australian Shopify stores routinely fail this with light grey body text on white backgrounds, or trendy pastel buttons with white labels. The frustrating thing is that low contrast doesn’t just hurt accessibility, it hurts everyone reading on a phone in bright Australian sunlight. Giving shoppers a carefully designed dark mode option to enhance the screen experience can further improve readability across different lighting conditions.

Test your store with a tool like the WebAIM Contrast Checker or the Stark plugin for Figma. Pay particular attention to: body copy, button text, form labels, placeholder text, and the colours used to indicate errors or required fields. If your brand palette has contrast issues, you don’t need to change your brand. You usually just need to adjust the on-site implementation: a slightly darker grey for body copy, a slightly bolder button label.

Focus indicators: don’t hide them

WCAG 2.2 introduced a stricter requirement for focus appearance. When a keyboard user tabs to a link or button, the focused element must have a visible outline with sufficient contrast against both the element itself and the surrounding background. Many themes use CSS to remove the default browser focus ring (outline: none) for aesthetic reasons, then forget to add a replacement. The result is a store that’s impossible to navigate by keyboard.

Audit your theme’s CSS for any rule that removes outlines without replacing them. The fix is usually a custom focus style that matches your brand, like a 2px solid outline in your primary colour with a small offset.

ARIA: use it sparingly, use it correctly

Accessible Rich Internet Applications (ARIA) attributes are powerful, but the W3C’s own guidance is that no ARIA is better than bad ARIA. Common Shopify pitfalls:

• Adding role=”button” to a div instead of just using a button element.
• Using aria-hidden=”true” on elements that contain focusable content.
• Marking up custom dropdowns without aria-expanded, aria-controls, or proper role attributes.
• Forgetting aria-live regions for dynamic content like cart updates or form validation messages.

If you’re unsure, default to native HTML elements (button, a, input, select, fieldset) and let the browser do the accessibility work for you. Reach for ARIA only when there’s no native equivalent.

Testing: tools, screen readers, and real users

Automated tools catch maybe 30 to 40 per cent of accessibility issues. They’re still worth running. Lighthouse (built into Chrome DevTools) and axe DevTools are free and will catch the obvious wins. For the rest, you need manual testing.

Try your store with a screen reader. On Mac, turn on VoiceOver (Cmd+F5). On Windows, use NVDA (free). On iOS, enable VoiceOver in Settings. Navigate your homepage, product page, and checkout. If you can’t make sense of what’s being read aloud, neither can your customers who rely on these tools daily. If you have the budget, paid accessibility testing with real users (organisations like Vision Australia offer this) is the gold standard.

Where accessibility meets performance

Accessible sites tend to be faster, simpler, and more maintainable. A well-structured page with semantic HTML, proper heading hierarchy, and minimal JavaScript loads quickly and works for everyone. If your store is struggling on both fronts, our guides on mobile speed optimisation and checkout speed often surface the same fixes that improve accessibility.

Treat accessibility as a feature, not a fix

The Australian Shopify merchants who handle accessibility best treat it as a design requirement, not a checklist. They specify colour contrast targets in their brand guidelines. They write accessible markup the first time, not after a complaint. They include keyboard testing in their QA process for every theme change. The result is stores that are easier to use for everyone, rank better in search, and don’t expose the business to legal risk.

If you’d like a full accessibility audit of your Shopify store with prioritised remediation steps, our Sydney development team has handled WCAG 2.2 compliance projects for everyone from small DTC brands to ASX-listed retailers. We’ll show you what to fix first and what can wait. Start a project with us to book a scoping call, or explore our wider services for ongoing support.

Want WCAG 2.2 baked in rather than bolted on? Our Shopify development team builds accessible stores for Australian merchants from day one.