Web accessibility means building a site that can be used by people with disabilities - visual impairments, motor limitations, cognitive differences, and hearing loss. It's not a niche concern: approximately 20% of people have some form of disability that affects web use, and many more experience temporary impairments (broken arm, bright sunlight, loud environment) that accessibility improvements also help.
What Shopify handles for you
Modern Shopify themes (Dawn, Craft, Sense, and current paid themes like Impulse) are built with accessibility in mind. They include:
- Proper heading hierarchy (H1 - H2 - H3) throughout page templates
- Keyboard navigation support for menus, modals, and interactive elements
- ARIA labels on icon-only buttons (cart icon, search icon, hamburger menu)
- Focus states visible on keyboard navigation
- Skip-to-content links for screen reader users
- Semantic HTML structure
Shopify Payments checkout also meets accessibility standards - Shopify maintains WCAG 2.1 compliance on their hosted checkout.
If you're using an older theme (pre-OS 2.0, or a theme that hasn't been updated in 2+ years), these foundations may be missing or incomplete.
What you need to handle yourself
Image alt text. Every product image, banner image, and editorial image in your store needs descriptive alt text. Shopify provides the field; you have to fill it in. Screen readers read alt text to describe images to visually impaired users. "IMG_1234" describes nothing. "Navy blue linen shirt, front view, showing button placket detail" describes the image usefully.
For decorative images that convey no information (background patterns, purely aesthetic dividers), use an empty alt attribute (alt="") so screen readers skip them.
Colour contrast. The text on your store needs sufficient contrast against its background to be readable by people with low vision or colour blindness. WCAG 2.1 requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
Check your colour combinations at webaim.org/resources/contrastchecker. The most common failures: light grey text on white backgrounds, white text on light coloured buttons, and small text in footer areas where colour is treated as decorative.
Form labels. Every form field on your store - checkout fields, contact forms, email capture - needs a visible label associated with the input. Placeholder text (the grey hint text inside a field) is not a label. When a user clicks into a field, the placeholder disappears - a screen reader or a user with cognitive disabilities loses the context of what the field is for.
Video captions. If you use video on your store - product videos, brand videos, tutorial content - add captions. This serves users who are deaf or hard of hearing, users watching in noisy environments, and users who prefer to read rather than listen. YouTube auto-generates captions that can be edited for accuracy. Vimeo offers captioning tools too.
Touch target size. Mobile accessibility requires tap targets (buttons, links) to be at least 44x44 pixels - Apple's recommended minimum. Small close buttons on modals, tiny "remove" links in the cart, and close-together navigation links all fail this. Test on a real phone, not desktop emulation.
Testing your store's accessibility
Automated testing: Install the WAVE browser extension (wave.webaim.org) and run it on your homepage, a product page, and your cart. It flags common accessibility errors visually on the page. Not comprehensive, but catches obvious issues quickly.
Keyboard navigation test: Open your store and put your mouse aside. Use Tab to navigate through interactive elements, Enter to activate links and buttons, Escape to close modals. Every interactive element should be reachable and usable via keyboard alone. This takes about 5 minutes and reveals more than any automated tool.
Screen reader test: On Mac, enable VoiceOver (Cmd + F5) and navigate your product page. Listen to how your page is read aloud. Missing alt text, unlabelled buttons, and poor heading structure all become immediately obvious.
Legal context
In the UK, the Equality Act 2010 requires businesses to make reasonable adjustments to ensure disabled people can access services - this includes websites. The standard used to determine whether a website meets accessibility requirements is WCAG 2.1 at AA level.
For public sector organisations, accessibility is mandatory. For private sector ecommerce, legal obligations are less prescriptive but the "reasonable adjustments" standard applies. As a practical matter: ensuring the accessibility fundamentals (alt text, contrast, keyboard nav, form labels) are in place is both the right thing to do and sufficient to demonstrate reasonable effort.
Accessibility and SEO
Many accessibility practices directly improve SEO. Alt text on images helps Google understand image content. Proper heading hierarchy helps Google understand page structure. Good keyboard navigation often correlates with clean HTML that search crawlers process better. Fixing accessibility is rarely purely an accessibility project - it typically improves technical SEO simultaneously.
