The State of Accessibility in E-Commerce, 2019 Q4 Edition

What is accessibility?

Accessibility is the degree to which a product, device, service, or environment is available to as many people as possible. The Canadian National Institute for the Blind (CNIB) defines accessibility as:

The ability for everyone, regardless of disability or special needs, to access, use and benefit from everything within their environment.

People can have a variety of disabilities that would prevent them from using a website with a mouse pointing device. A full 16% of the US population has a disability, and would benefit from keyboard and screen reader navigation features on a website. This is a significant population of about 35 million people. We need to make sure the web works for everyone, not just mouse pointer users.

This article focuses on the necessity of e-commerce sites to be accessible. People who use any assistive technologies to navigate have a human right to have access to the same products and services online as people who navigate with a mouse.

So, are the highest grossing e-commerce sites accessible?

In a word, no, but they are getting better. Every year on Global Accessibility Awareness day (GAAD), I publish a report on the state of accessibility in e-commerce. GAAD happens mid-May, so around that time, I do a Google search on the top 10 highest grossing e-commerce websites. This page came up in my search results this year.

Armed with my list, I do a high level accessibility review of each website. This includes performing a set of accessibility tests on path-to-purchase pages. I use a methodology outlined at the end of this article to assign each website a grade. I have been tracking these grades since 2017.

This year, I thought it would be interesting to check in mid-year, to see if these websites have become more accessible over the past 6 months. I outline the results in this article. You can read my e-commerce accessibility reviews for past years on Medium.

E-Commerce accessibility assessment results and trends for 2019 Q4

I tested the following top 10 American e-commerce retailers in November, 2019: Amazon, Apple, Walmart, Home Depot, EBay, Best Buy, QVC Group, Macy’s, Costco, and Wayfair.

If a website got a passing grade, that means it is possible to accomplish the main goal of the website with a keyboard or screen reader. For an e-commerce site, the main goal is to buy something online.

Just because a site gets a passing grade, that doesn’t mean that it is a good experience. All these sites have opportunities to improve their keyboard and screen reader experience. Passing is the bare minimum that a company should guarantee. Here are the trends for this year’s top 10 highest grossing e-commerce websites:

Trending scores:

• 90% of the websites receive a passing grade (as oppose to 80% in the second quarter of 2019, and 40% in 2017).
• 30% received an “A” grade (versus 20% in May, and none in 2017).
• 40% would still be difficult to use with a screen reader (as opposed to 60% in previous assessment years).

Here is a tip: The most accessible 60% of the e-comm giants have accessibility leads on their staff.

Trend on allowing people to zoom:

We should let people have control over their own experience. Here are the statistics on what percentage of the top 10 e-commerce websites allow people to zoom:

• 70% of the websites are scalable on a mobile device. They allow people to pinch and zoom.
• Only one of the websites enables a person to scale the text alone to 200% on desktop with no issues.
• Half of the websites are mostly scalable, text alone, to 200% on desktop.
• 40% are NOT scalable, text alone, to 200% on desktop. Legibility is sacrificed too much for these e-comm giants to pass this test.

Enabling successful keyboard navigation:

In general, experience designers are adept at designing experiences for people who use a mouse. They must also get better at considering the keyboard and screen reader experience.

Sighted people who navigate with the keyboard need to be able to see which element has keyboard focus. They also need to be able to quickly skip to blocks of content that interest them.

• 70% of the e-comm giants have skip navigation links (and they are visible on keyboard focus). These links allow a keyboard user to “jump” over the navigation menu links and get directly to the content area. Keeping the skip links visible on keyboard focus is a best practice that everyone should do.
• 70% use a visible focus indicator in a fairly consistent way. The visible focus indicator lets a keyboard user know where their focus is on a page.
• None of the e-comm giants have designed a custom focus indicator. They all use the browser default. This is not consistent across browsers and can be hard to see.

Developing in an accessible way:

Automated testing tools can quickly and easily detect code issues that impact accessibility. Within the last 6 months, code issues have been dramatically reduced on many e-commerce websites tested.

• All the e-comm giants seem to love the Google Lighthouse audit tool. Lighthouse accessibility audit scores improved for every single e-comm giant tested.

Continued positive trends:

Most of these experiences employ very little animation. I think that is a good thing.

Most common issues:

• Still, keyboard focus often goes behind a modal window. This means a keyboard user cannot access the content in the modal to either review the content or close the modal.
• Inaccessible form error validation. Error messages continue to be shown visually, but not announced by screen readers.
• Poor use of landmarks. Landmarks allow sections of the page to be labelled so that the screen reader can easily jump to those sections. This unique keyboard and screen reader experience should be designed mindfully.
• Screen reader reading out special characters like chevrons along with links. This is evidence that the page was not tested with a screen reader.
• Non-descriptive link labels are still a problem. E.g. “Learn more” or multiple links all called “Details” or “En” for the select a country/language link. People who only hear the link label need context on what the link is for.
• Use of non-inclusive language, like “View” or “See.” Most calls to action that include a verb can simply drop the verb and they will work just as well. E.g. “See all articles” can become “All articles”.
• Inconsistent use of visible focus indicator. As a keyboard user tabs through the page, they lose track of where their keyboard focus is, because the outline is not always there.
• Why do NONE of these experiences have an H1 on the homepage? This seems like a real miss for search engine optimization, in addition to accessibility.

Summary and next steps for e-comm giants

Here are some fixes, in order of easiest to hardest:

1. Hire an accessibility lead. Companies with dedicated accessibility leads have more accessible websites.
2. Have all design and development teams working on the website learn to use a screen reader. Here is an article on how to use the VoiceOver screen reader that ships with Apple products.
3. Ensure that the browser default focus outline is turned on. This is an easy code fix. This will ensure that keyboard users always know what element has focus.
4. Add a level 1 heading to your homepage! If anyone knows why none of the e-commerce giants employ a level 1 heading on their homepage, please let me know in the comments.
5. Add landmarks with descriptive aria-labels to global navigation, the main content area, footer navigation, and the website search. This fix will not impact the design. This will allow screen reader users to easily jump to the main sections of the page. Do some research about how landmarks work. This is a critical part of experience design, so it will be a good tool to have in your tool belt. Here is an article I wrote that includes information about landmarks, if that helps.
6. Ensure that modal windows can get keyboard focus, and follow accessibility rules for modal windows. This is also usually a straightforward code fix. This will help keyboard users when the experience involves content in a modal window. Do some research to figure out how an accessible modal works. Try doing a Google search for “accessible dialog” or “accessible modal”.
7. Ensure that form error messages are announced to screen reader users. Ensure that form errors can easily be corrected by keyboard users. Here is an article I wrote about making form error validation accessible.
8. Make your link labels descriptive. An easy way to do that (that may impact the design) is to rewrite vague labels to make them descriptive. E.g. Change “Learn more” to “Learn more about product X”. A slightly more difficult way would be to programmatically append descriptive text to your vague label. I like to do that with aria-describedby attributes that point to nearby contextual content, like a heading. E.g. How to use an aria-describedby attribute:

<h3 id=”myHeading”>Heading</h3><p>Lorem ipsum description text</p><a href=”mypage.html” aria-describedby=”myHeading”>Learn more</a>. In this case, the screen reader would announce, “Learn more, Heading.”

I hope that when I retest these experiences on GAAD 2020 that these issues have been resolved. I will let you know next May!

Methodology used for testing:

For your reference, here is how I tested the pages.

The best way to assess a website’s accessibility compliance is to perform a full accessibility audit.

This involves manual and automated tests of all representative pages. A representative page list is a set of pages that includes all templates used on the site and all components. An additional subset of pages should be tested to test for content issues that may differ between components. A full accessibility audit can take 2 weeks or more to perform, and was not performed on each of the sites mentioned in this article.

However, it is possible to predict the probable accessibility compliance of websites by performing a more limited set of manual and automated tests only to critical pages. This analysis used a two-part quick measurement methodology. Tests were performed to only the website homepages (desktop breakpoint) in order to glean indicators of probable accessibility compliance levels.

Part 1: Test the top 10 most common accessibility issues (90% of score)

The most common accessibility issues I find in my work auditing websites for accessibility compliance are listed below. I provide clues below to how I measure against each of these issues.

1. Keyboard accessibility — Does the global navigation menu work with the keyboard/screen reader alone? How many tab stops to get through a product tile? Do the product listing page filters work with the keyboard?
2. Heading structure employed — Headings are marked up as headings and in a hierarchy.
3. Descriptive link labels employed — Link labels provide enough context when heard read aloud, e.g. “Learn more” does not pass this test.
4. Accessible forms and error validation — Form error messages are read aloud.
5. Alt attribute usage — Alt attributes are always used and have appropriate content.
6. No animations that cannot be paused.
7. Scalability on mobile device — User can pinch to zoom.
8. Visible focus indicator employed.
9. Skip navigation link employed.
10. Use of landmarks — For screen reader navigation. Landmarks should be present for all page content and have descriptive labels to get full marks.

Part 2: Accessibility mindset indicators (10% of score):

1. Automated tool scores (I test with the WAVE toolbar and Google’s Lighthouse tool).
2. External accessibility acknowledgements. E.g. Easy-to-find site content offering support with accessibility-related issues or access to a web accessibility policy.
3. Internal accessibility acknowledgements. E.g. Evidence of a job within the organization dedicated to overseeing web accessibility (e.g. LinkedIn or Careers section of website).

Common question #1: Why focus on the top 10 highest grossing e-commerce sites?

Making a website accessible takes time, effort, and expertise. If anyone can make it happen, it should be one of these e-commerce giants in the top 10 list.

Common question #2: Why don’t I publish the grades and name the companies?

My aim with this article is to let everyone know the situation, and to educate designers and developers on how it can be improved. I do not want to single out any company. If any of the top 10 companies reach out to me, I will gladly share their results. I have already shared the results with one of the companies.

Thanks for reading this far. I hope you enjoyed the article and that it will help you or a friend make an e-commerce website more accessible.