Case study: Accessibility
Chaser Brand.
How we audited and fixed Chaser Brand's Shopify Plus store against WCAG 2.1, taking its accessibility score from 74 to 99.
-
74 → 99
Accessibility score
Measured with third-party accessibility testing software, before and after our work.
-
WCAG 2.1
Standard we built to
The Web Content Accessibility Guidelines, the benchmark used around the world.
-
6
Issue types fixed
From keyboard navigation to color contrast, every issue the audit found.
The challenge
Accessibility in mind.
In June 2019, Chaser Brand's marketing manager, Phil, asked Hopatoo how to make the brand's Shopify Plus store fully accessible. He knew millions of potential customers with disabilities could struggle to shop the site, and he wanted to open it up to everyone.
He had also seen a rise in accessibility-related lawsuits in 2018, as regulation increasingly required online stores to be usable by people with disabilities.
Phil knew what needed to happen, but not how. The WCAG 2.1 guidelines explain what an accessible website looks like, but not how to apply them to a Shopify Plus store, step by step.
In the client's words
When we heard our website wasn't accessible, we didn't know how to fix it. There is so much information out there about accessibility, but no step-by-step solution for a Shopify Plus website. Accessibility became our highest priority in 2019.
Why it matters
What is website accessibility.
Over a billion people worldwide live with a disability, according to the World Health Organization. Website accessibility removes the barriers that stop them from shopping with you. WCAG 2.1 groups the work into four principles.
-
Perceivable
Shoppers can perceive every piece of content, whether they see it, hear it or read it with a screen reader.
-
Operable
Every part of the store works with a keyboard and assistive technology, not just a mouse or touchscreen.
-
Understandable
Content, labels and interactions are clear and behave the way shoppers expect.
-
Robust
The store works reliably across browsers, devices and assistive technologies like screen readers.
How we helped
From audit to accessible.
What our audit found
- Keyboard (tab) navigation didn't work
- Images were missing alt text
- There was no accessibility statement
- The site didn't work with many assistive technologies
- Links, buttons and forms had no names, so screen readers couldn't read them
- Color contrast was too low to read comfortably
What we fixed
- Rebuilt keyboard navigation so shoppers can use the whole store without a mouse
- Added skip links so keyboard and screen reader users can jump straight to the main content
- Added descriptive alt text to images
- Gave every link, button and form field a clear name for screen readers
- Adjusted colors and contrast so text is easier to read
- Published an accessibility statement and improved support for assistive technologies
The result
A store everyone can shop.
Chaser Brand's store became easier for every shopper to use, with fewer barriers between browsing and checkout. Building to WCAG 2.1 opened the site to customers who had been shut out, and reduced the brand's exposure to accessibility complaints and lawsuits.
A final audit with third-party accessibility software scored the site 99, up from 74 before our work.
Is your store accessible?
We'll audit your Shopify store against WCAG and show you exactly what to fix. Or call us and we'll talk it through.
Get an accessibility audit Call 1-877-516-6319