Three Starting Accessibility Tips for Your WooCommerce Site

This is taken from a podcast (see end of post) with Amber Hinds on WooCommerce and accessibility. Although they are important to all sites, these specifically need to be looked at when selling to customers online.

WooCommerce Accessibility Tips

Color contrast is the most common but also the number one error on the top 1 million websites is color contrast. So make sure and check that. And it’s almost every website has it. I think it’s 88% of websites have color contrast issues.

Alternative Text for Images

Another common one is adding alternative text to images and in an e-commerce store. I think one thing that’s really important to think about is that you really want to explain. So there’s a couple of different kinds of images you can have. You can have a decorative image, which it’s correct to not have alternative texts. And that’s something like a border or perhaps an icon that doesn’t do anything. You can have functional images where they’re linked and then you have images. So on your e-commerce store, if you’re thinking of your product images, it’s not enough to just say like dress.

So let’s say you’re selling clothing and you have a woman’s clothing archive and you have dresses and you can go to this category and see all the dresses on your site. You wouldn’t want the image to say dress because a blind or visually impaired person, wouldn’t be able to tell the difference between all the dresses that are on that page. And why would they choose dress A versus dress B? So you do actually want to describe in your product description, what that product is or how it’s different and in enough detail on the alt for the archive. So this is something some people have said, well, if I just put image of dress, but they can go down to the product detail section and get the information like it’s short sleeve, it has a long skirt and it’s black, right?

But the problem is, is that most of your customers may not enter onto an individual product page. They’re going to enter onto an archive page. And as a result, they need to know when they’re on the archive page, why would they go view the individual product page for the first dress versus the second dress? So that’s where you really do want to make sure that your alt descriptions are really descriptive of what the product is so that they can know, oh, okay, this one has short sleeves. This one is black. Or this one is a casual dress versus a really formal dress. So those sorts of things. So alt, I feel it’s something a lot of people understand from the SEO perspective, but you also want to think about adding those descriptors that would really describe to someone who is shopping and can’t see what the product is.

Heading Ordering

Another common mistake, especially if you purchase a WordPress theme out of the box and you just install it and you don’t change things is the heading order. So heading is not supposed to be used in an outline format, there should only be one heading one on a page. And then below that you would go heading two. And then if you have sub items under heading two, there’d be heading threes, but we frequently see very especially on homepages. I don’t know what it is, but people there’ll be rogue heading fives because somebody just wanted to make it smaller.

So your headings need to be used in correct outline format because people, again, this is a way that people who can not see and are on a screen reader can very quickly jump to the information they need. They could just use a keyboard shortcut to say, so if you’re using the NVA screen reader, you could just press two. And it would read out all the heading twos on a page. Well, if you’ve skipped heading two and you only have heading three or heading four, they might press two. And it will say there are no heading twos. And they’ll think there are no headings on this page. And they might not even bother to try three or four. And then they’ll have no way of knowing that they could quickly jump to a certain section on the page. So that’s another area that can dramatically improve people’s ability to navigate a website or to get to different things the product detail section or things like that. Which the headings in WooCommerce on the product pages by default are in the correct order.

But we’ve seen some really custom WooCommerce websites where someone has rebuilt their product pages in Gutenberg, or they’ve done something that. Or they’ve removed, they didn’t like the said details in the details tab, right? And so they’ve removed that heading, but then what happens is there’s no way for a visually impaired person to jump there. So I feel those three things are probably some of the easiest to wrap your mind around and to easily fix on your site. And maybe the last one is your links. I don’t know how many e-commerce sites necessarily have offsite links or links to other places as much as you might see on different service-based websites, but for sure you want to make sure that the anchor tag is descriptive of where the link is going.

So you don’t ever want to say click here. Or because people don’t know, you have to make sure that if they only hear the link alone without any surrounding texts, they actually know where that link goes. So you’d want to say, instead of saying, to view our refund policy, click here and linking click here, you just link, view our refund policy as the text that you would link. And then you’d want to make sure on your archive pages, if you are displaying the buy now button or the view product details, or more information that there’s typically hidden screen reader text, so that it would say instead of just saying buy now, it would say buy product name now to someone on a screen reader. So they would actually know what that buy now link was in comparison to another buy now link.

SEO and Accessibility

A lot of accessibility fixes help SEO, and it’s not just because it can help your website rank better, but also because if a website is usable, people are more likely to stay on it and engage. So you’ll see a lower bounce rate.

I think I read a study out of the UK that said that people with disabilities or especially blind or visual impairments over 78% said that if they come to a website and they immediately realize there’s no skip links present and they can’t really navigate it very easily, they just leave. They don’t even try and they’ll just find a competitor to purchase the product from. And so that’s really a strong reason to think about accessibility because it can help, obviously it’s the right thing to do, but it can also really have positive impacts for the business.

You can listen the full podcast.