Embrace yourself: a quick guide to verify if your eCommerce is accessible

Are you ready to check if your site is accessible even before testing it with users? It’s time for an audit.

This checklist is a part of our “Accessibility guide for eCommerce owners” eBook. Download it here to discover the best practices to implement accessibility and make Google’s algorithms love your site.

You’ll need six tools

1. A screen reader will help you access the page, as a blind person does, through hearing only. There are several available on the market, including JAWS, VoiceOver, and NVDA. However, if you have the Chrome browser, I recommend the ChromeVox plugin because it works on Windows and macOS.
2. Accessibility Insights is another Chrome plugin that’ll help you understand the hierarchy on the page thanks to the tab flow option. It’ll also automatically look for accessibility mistakes you haven’t caught yourself, but treat this as an additional checkup and not a primary source for an audit. To test the site more thoroughly, check out the tool I describe in number six below.
3. A contrast checker will show you problems with your background and foreground contrast. I’m using A11Y Color Tester.
4. Inspect panel helps you see the code behind the element, especially the alt text and the ARIA labels if your shop is using them. You bring up this panel with a right-click on any element on the page, and from the menu, you pick “inspect.” Alternatively, you can press command+option+i on your Mac or F12 on your PC to do the same.
5. A readability test can check how understandable the content is on your site. An example can be found here. 
6. Auditing software. Why am I putting this at the end? Because it should only complement the audit and not drive it. It doesn’t show the usage logic, and it’s better to understand that before seeing other errors. However, it might lead you in the right direction if you missed something important. Several are available for free. I’m using an aXe browser extension.

You will audit these areas

1. Navigation: headings, tab flow, and sitemap.

To navigate the page, we need a proper heading structure and tab flow. We’ll use Accessibility Insights, the second tool above, for both. Another thing is a sitemap, which is also helpful for navigation.

To check the heading order, go to the “Assessment” tab and then “Headings.” Verify if the heading structure is logical. It’s like in a book: H1 should be similar to the chapter title and singular for every subpage, H2 would be a subchapter, H3 would be a paragraph title, and so on.

To check tab order, go to “Fast pass,” and then “Tab stops.” Then tab through the page to visually show the flow. This is how a keyboard user will access your site. Is the order easy and logical? Are all the necessary elements accessible through tabs?

At the very end, check if a sitemap for visitors is available on the site. There are two types of sitemaps. One is for search engines, and you can reach it after adding /sitemap.xml to your main URL. The other is for visitors, and it’s a hierarchical list of links. You can see an example here on the WAI site. It should be linked in the footer.

2. Forms: login, sign up, and contact

Check if the labels have proper contrast and are visible even after typing. It’s a common mistake that they disappear after typing information in. For users with a shorter attention span, that might mean they need to delete the text to remind themselves what the label is for. Check the order of the fields when you tab through them to see if it’s logical. Check if submit buttons work via keyboard and not just a mouse.

3. Checkout flow

Using ChromeVox or another reader of your choice, go through the entire buying process, especially the checkout. After all, this is where mistakes will lose you money and cause the user the most frustration. Pay the most attention to the submit buttons, payment accessibility, and the purchase completed page. Also pay attention to the links and buttons to make sure it’s clear where they’ll take you. Check the anchor tag text as well.

4. Contrast and color

Pay special attention to the contrast of the text. By that, I mean the contrast ratio of the background color and the text color. For this, use WebAIM or another contrast checker. Also check the amount of white space around the text. This is the area in-between lines and paragraphs. Some users will increase the font size two times, so change this setting in your Chrome browser to check if the contrast and readability are still OK.

Another thing to remember is that if users are color blind, they’ll not see color coding correctly, like, for example, red stands for unavailable and green means available. In such contexts, you always need to use labels and colors.

5. Alt text for images and icons

Look through all the images and icons on your site using Inspect panel. The purely decorative ones should have no alternative text. In code, it appears as alt text = “”. All the others should have succinct descriptions in the alt tag and where they’ll take you in the link <a href> tag if they are interactive. The most important buying decisions are the product images and the color variants, so ensure these have the best descriptions possible.

6. Readability

Check if the language you use on your site is easy to understand. Try to focus on verbs instead of nouns, don’t use jargon, make sure all your call-to-actions are intuitive, and use short sentences. 

7. Check if there are no other problems, like auto-playing videos, links that open in a new tab without informing the user, or flashes that might provoke epilepsy. Make sure to add subtitles to the videos you use.

At the very end, to ensure you caught everything, you can run through a WCAG checklist and/or run auditing software like aXe. Also, audit your site on both desktop and mobile.

Write down all the problems and think of recommendations on how to fix them. Some of them will strictly concern code, and some might be more in the design area, so it’s good to work with a front-end developer and a designer in this step.

After you make sure all the basic mistakes are fixed, you can go and test it with your users. Dig deeper to find nonobvious stuff. Good luck!

If, however, you think the audit might be a tad too complicated to do on your own or will take up too much of your time, contact us. We’ll gladly do it for you along with user tests and a redesign if you wish. 

If you want to dig deeper into the topic of accessibility for eCommerce, check out our free “Accessibility guide for eCommerce owners” eBook. It’s our experience distilled into a 40-page eBook covering all the basics about implementing accessibility in your store.