Making sure your ecommerce website is accessible

In October 2019, the Supreme Court declined to take up Domino’s appeal in a case against Guillermo Robles.

The case centered around Robles, who is blind, not being able to use the company’s website or mobile app to order a pizza because they were not built to accessibility guidelines. The court’s decision is a win for accessibility and those use technology outside of a mouse and keyboard to browse the internet.

Why does this matter to you?

Well for one, having an inaccessible website puts you into a similar position as Domino’s with the risk of a lawsuit. And that’s something nobody wants.

But more importantly, every website should be accessible to every person. That’s one of the biggest principles of the internet. It opens up new doors for anyone who has a connection. And allowing all people, even if they use something like a screen reader, to view and use your website should be your goal.

So let’s discuss some ways that you can make sure your online store is accessible to everybody.

Why accessibility matters

Everyone should be able to view and use your website no matter what technology they use to browse the web. It doesn’t matter whether they use the traditional mouse and keyboard, just a keyboard, a screen reader or some other version of assistive technology.

There are roughly 54 million disabled Americans, according to a 2005 study by the U.S. Census Bureau. And most of them probably don’t use a mouse and keyboard like you do to surf the internet.

Very much like how physical businesses must have ramps, handicap spots and other changes to be in line with the Americans with Disabilities Act, your website must make accommodations so that people with disabilities are able to navigate your website, fill out forms, purchase your products, etc. I know that battles about whether or not the ADA requires business websites to be accessible are still ongoing, but morally it’s definitely the right thing to do.

Also, keeping your website inaccessible to some people makes no business sense. You are doing nothing but self-limiting the size of your customer base. And no matter what industry you focus in, that’s not a great business strategy.

So web accessibility matters for both your visitors and customers and your own business.

Check your plugins and extensions for accessibility issues

Obviously, unless you are developing your own code for the online store, you’re probably using plugins or extensions to do the heavy lifting for you. And that’s perfectly fine.

But it does not exempt you from not having to worry about accessibility issues. As a website owner, you are responsible for what you put and use on your website. That includes third-party code.

So while you might not be able to directly fix some of the issues discussed here, you can still check for them and then let the developer(s) know about the problems. And if they are good developers, they will go ahead and fix the problem.

Forms are a pretty big challenge

One of the biggest accessibility issues on any website comes with the forms. While following the correct HTML standards should make this pretty simple, in today’s design world forms have become an accessibility liability.

Take for example labels. All form fields must have a label describing what the field is for. Yet, if you were to look up the best form designs, most of them do not use an actual label where it should be. Instead, they use placeholders inside the input element, which is not acceptable for accessibility.

So instead, make sure your forms (including all checkout forms), whether you’ve built them yourself or are using a plugin or extension, have labels for each field. If not, either fix it or get in contact with the developer to get them to fix it.

Likewise, make sure that the submit button (or checkout, pay, etc.) is within the form and is a proper submit button. This is another thing that might trip up your accessibility.

Finally, I’ll go over this at the end of the post, but it might be helpful to try and complete your forms using only your keyboard and to run it through an automated checker just to make sure everything is okay.

Make sure your headings are correct

An easy thing you can do is to check to make sure you’re using the correct heading levels.

In HTML there are six heading levels, denoted by the h1, h2, h3, h4, h5 and h6 tags. H1 is obviously the most important and it descends down to six. There should only be one h1 tag on a page, and that should be the title of the page (or maybe the website name for the homepage).

H2 should come next, and I use this for all of my subheadings. If you have any subheadings under those subheadings, you would use h3 and so on and so forth.

This helps screen readers figure out the importance of each heading and create an accurate outline to help their users. Users then can use that to navigate their way around the page.

Be descriptive with your alternative text

All of your images need to have alternative text. This is text that is inserted through the alt attribute in the image HTML tag. And it’s either displayed on the page if the image isn’t loaded or a screen reader will read it out to a user.

Essentially, it needs to be a sentence-long description of what the image is so that people have a very good idea of what the photo should be, since they aren’t able to see it for one reason or another.

But on an online store, the alternative text matters a whole lot more. If people are reading or hearing the alternative text, they can not see the photo of the product. And no one should really buy a product without knowing what exactly they are getting.

So when you are uploading your photos, make sure you’re adding in very descriptive alternative text. Say what the color is, what the size is and what unique features it might have. Better yet, read off your alternative text to someone who has never seen the product to see if they can get the mental picture.

It will help those who can’t see the photo, and it can be the difference between making that sale or not.

Run through your website with a keyboard

One good way you can test out your store’s accessibility is by simply going through your website using just your keyboard.

This is a basic way of traversing through any website, and all assistive technology uses this to navigate through a webpage. So it makes it a great spot to start testing out your site’s accessibility.

Start from the homepage and try to go through all of the pages. If you have forms, go through the forms and make sure you can submit a form. If you sell products, see if you can add multiple products to your cart and then checkout.

Then, if you can’t do that, take notes on where you got stuck and then start to see if you can fix the problem. You might need a developer to help you out with it.

But take the time now to see if your website is actually accessible through the keyboard. It will go a long way in making sure everyone can use your website.

Use automated tools

Finally, you can also use a few automated tools to test the accessibility of your website. Unfortunately, computers don’t catch everything, so you’ll still need to do manual testing to completely check your website. But it is a great place to start, especially if you don’t know what you’re doing.

I’ve written a more in-depth blog post about accessibility testing tools earlier, so I won’t completely rehash that here. But I will say that the accessibility testing tools within some browsers’ developer tools (namely Chrome and Firefox) are getting a lot better.

Still, one of the best things I think you can do is to use the HTML_CodeSniffer tool. This is a simple tool that sits in your browser’s bookmarks bar. To use it, navigate to the page you want to test, and then click on it in the bar.

A window will pop up that will show you the number of errors, warnings and notices. And then you can click through to view any of the issues. Plus, you can check specifically for Section 508 errors, WCAG 2.1 AA errors or anything in between. It really is a great place to start with your accessibility.

So make sure your online store is accessible to everyone no matter what technology they use to browse the web. It’s the right thing to do, it helps your customers and it helps your business.