The Saturday Checkout

#5

How to make your Shopify store accessible and WCAG compliant

Read time - 11 minutes

06/01/2024

Accessibility is the collossal weak underbelly of the internet. You're probably running around with perfect eyesight, and a fully functioning body. But what about the 15% of the world's population who aren't?

If you're not making your store accessible, you're not only pissing off a bunch of people who'd really like to buy your stuff, you're also breaking the law in many countries.

Let's get into it!

TLDR; Quick & Dirty

• Accessibility is the practice of making your store usable by as many people as possible.
• It's important because it's the law, and people with impairments also have credit cards and need to buy stuff. And they love stores who make it easy for them to do so. Anyone say "loyal customers"?
• WCAG stands for Web Content Accessibility Guidelines. It's a set of guidelines published by the World Wide Web Consortium (W3C) that explain how to make your website accessible.
• In short, make sure your store is keyboard navigable, everything is available to a screen reader, and your store has good colour contrast & is easy to read.

Ready to dive into the details? Keep reading...

So first, let's define what accessibility is, and why it's important.

What is accessibility?

Accessibility is the practice of making your store usable by as many people as possible. This includes people living with hearing, sight or other physical impairments, the elderly, people with low literacy, and people who don't speak your language.

Why is accessibility important?

Accessibility is important for three reasons:

1. This is why we invented the internet!

The whole idea the internet was founded on was to make information accessible to everyone. And that wasn't just a nice to have, it was a core principle. So if you're not making your store accessible, you're breaking the internet.

2. It's the law... or soon will be

In many countries, including the US, UK, Canada, Australia, and the EU, it's illegal to have an inaccessible website, or there's legislation in the works to make it illegal. So if you're not making your store accessible, you're either about to, or are actually, breaking the law.

3. It's good for business

People with impairments also have credit cards and need to buy stuff.

So if you're not making your store accessible, you're missing out on a bunch of sales. And seeing as up to 15% of the worlds population has some form of impairment that affects their ability to use the internet, that's a lot of moolah you're missing out on, for no good reason.

What is WCAG, and what are the features of an accessible Shopify store?

WCAG stands for Web Content Accessibility Guidelines. It's a set of guidelines published by the World Wide Web Consortium (W3C) that explain how to make your website accessible.

In general, an accessible Shopify store will have the following features:

Your store should be completely keyboard navigable

This means that you can navigate the store using only the keyboard. You can do this by pressing the tab key to move between links, and the enter key to activate them. You can also use the arrow keys to scroll up and down the page.

You'd be surprised how many stores aren't keyboard navigable, and just how many people it pisses off. Using a mouse is difficult for a lot of people, including people with Parkinson's, arthritis, and other motor impairments. So if you're not making your store keyboard navigable, that's a lot of irritation.

A good rule of thumb is: can I clearly and easily complete an entire purchase using only the keyboard? If not, you've got some work to do.

Everything in the store is availble to a screen reader

A screen reader is a piece of software that reads out the contents of a webpage to a user. It's used by people who are sight impaired or have low vision. This includes people who are blind, have cataracts, or are colour blind.

That's a tonne of people.

Just by having a semantically clean theme and page setup you should be doing okay. That said you'll probably need a developer to get this completely right. Especially around mega-menus, hover states on collection pages, and other fancy UX.

Your store has good colour contrast & is easy to read

I find fashion brands are the worst offenders here. They love to use tiny light grey text on a white background. Which is fine if you have perfect vision, but if you're colour blind, or suffer from any kind of vision impairment, it's a nightmare.

As I hurtle towards turning 50, I'm finding my eyesight is getting worse. I'm also finding that I'm less tolerant of stores that make it difficult for me to read their content.

Seriously, if I can't read your store, I immediately hit the back button. And if I came from Google Shopping, my click probably cost you a couple of bucks. Seeing as I'm relatively young, you can assume this affects a lot of people, and that's a lot of back clicks.

If you do nothing else, make sure your store has good colour contrast, and is easy to read, and you'll see your conversion rate go up immediately.

How can I make my Shopify store fully accessible & WCAG compliant?

First thing you need to know - there's no such thing as a fully accessible website. There's always something you can do to make your store more accessible. So don't get hung up on trying to make your store 100% accessible. Just do what you can, and you'll be fine.

Second - this is not a new issue, and over time accessibility has become baked into standard HTML and CSS. So if you're using a Shopify 2.0 theme, you're probably already doing a bunch of stuff to make your store accessible.

So with that in mind, let's get cracking.

I'll cover the easy stuff first, and then we can dive into the more technical stuff.

Getting Thing Accessible: The Easy, non-technical, and free

1. Give everything a good contrast ratio & make sure it's easy to read

This one is easy. Just make sure your text is easy to read. That means good colour contrast, and a decent font size.

To make sure you're all good, you can use a tool like to check your contrast ratio. It's free, so have at it.

I can't stress this enough... do this!! It's so easy, and will immediately have a positive impact on your conversion rate.

If you're a fashion brand, and this is hurting your soul, consider this an interesting challenge. You can still have a beautiful store, and make it easy to read. Your designer is just going to have to be a touch more creative.

2. Add alt text to all your images

This is also easy. Just add alt text to all your images. This is the text that gets read out by a screen reader. It's also the text that gets displayed if the image doesn't load.

It's literally baked into Shopify, so you have no excuse not to do this. It also helps with SEO, so you're killing two birds with one stone.

3. Give everything a title & make sure it's descriptive

This is also easy. Just give everything a title, and make sure it's descriptive. This includes your pages, collections, products, and images. This is also baked into Shopify, and helps with SEO, so you have no excuse not to do this.

Okay... so that's the easy stuff, now let's get into the more technical stuff.

Getting Things Accessible: Technical, and requires expertise and/or money

1. Add in a "skip to content" link

This is a bit more technical, but still pretty easy. Just add in a "skip to content" link at the top of your store. This allows people using a screen reader to skip over the navigation and get straight to the content.

It's something that seems super small... but can you imagine having to manually listen to every option in a mega-menu before you got to the content?

I'm getting annoyed just thinking about it. 😂

Do this and get lots of good karma.

2. Add breadcrumbs, and make sure they're keyboard navigable

Breadcrumbs are those little links at the top of a page that show you where you are in the store. They're super useful for people using a screen reader, and also for people who are just browsing around your store.

They'll add to your "pages per session" metric, while also helping people find what they're looking for.

3. Make sure your store is keyboard navigable

Okay.. so this one is a bastard, and will take a fair bit of work. The gold standard is you can do everything in your store using only the keyboard. That means going through collections & products, adding stuff to your cart, and checking out.

Also, don't forget those mega menus... they're almost always impossible to use just by keyboard. I should know, I've had to fix a lot of them for my clients!

4. Make sure your store is screen reader friendly

This one is all about getting the HTML all pretty. You need to make sure your store is semantically clean and structured in a logical way.

In some cases you'll be adding a whole bunch of "aria-labels" to your HTML. These are labels that get read out by a screen reader. So you'll need to make sure they're descriptive, and make sense.

Modern CSS & Javascript has made it really easy to make shitty HTML look good, but that's come at the cost of making it difficult for screen readers to understand what's going on.

This is a bit more technical, and you'll probably need a developer to help you out.

For a fairly short and not too technical overview, check out Using semantic elements to mark up structure by W3C.

How Can I Check If My Store Is Accessible?

There are a bunch of tools you can use to check if your store is accessible. Here are a few of my favourites:

• - Check your colour contrast ratio
• - Check your store for accessibility issues
• - Check your store for accessibility issues

Also, don't forget to test your store using a screen reader. If you don't have one, you can use for Windows, or for Mac.

And lastly, don't forget to test your store using only the keyboard. This is a bit more difficult, but you can use from W3C to help you out.

Parting Thoughts Accessibility & WCAG Compliance

This is a tricky yet super important feature of your store.

Get it wrong, and you'll be breaking the law, pissing off a bunch of people, and losing out on a bunch of sales.

That said, get it right and you'll have the triple whammy of good karma, making the internet a better place, and making more money.

I know which one I'd choose! 🙂

Need more tailored advice?

Here at JohnDetlefs.com we specialise in making Shopify stores nice and accessible, and have even saved some clients from expensive lawsuits.

If you need any help, reach out, and let's chat about how we can convert your store from an accessibility wasteland into a fully WCAG compliant utopia where happy customers leave glowing reviews.

Either way, best of luck, hope you're crushing it, and have a great week!

Cheers,

P.S. Found this useful? Share it with your friends. They'll thank you for it. Also, consider subscribing to my newsletter. I send out a weekly email with tips and tricks for Shopify store owners. You can unsubscribe at any time, and I promise not to spam you.