With so many barriers in store, shopping online from the comfort of your home is an attractive option. Furthermore, under the Equality Act 2010 all retailers must provide access to their goods online as well as in store.

We decided to review the online accessibility of six well known UK retailers to identify the main barriers for online shoppers with disabilities.

The chosen retailers were:

  1. Boots
  2. Mothercare
  3. House of Fraser
  4. Joules
  5. Tesco
  6. Not on the High Street

How did we measure/review online accessibility?

To evaluate the accessibility of a site we audit them against the Web Consortium Accessibility Guidelines from the W3C. Also known as WCAG 2.0, these guidelines help to improve web accessibility and are the best way to ensure the site serves the widest audience.

We followed a typical shopping journey to assess how the retailers approached accessibility on their sites. This included:

  • Homepage and search
  • Browse (including any product category and product range pages)
  • Selection (product page and basket)
  • Payment (delivery and payment details)

We focused on the major aspects of WCAG 2.0 Level AA, including important factors such as keyboard accessibility and screen reader compatibility. Items we looked out for included:

  • Use of headings
  • Alt text for images
  • Availability of skip links
  • Inclusion of a visible focus
  • Access to forms
  • Use of ARIA to provide greater context
  • Access of pop ups / modal windows
  • Colour contrast
  • Navigating around is in a logical order
  • Links are meaningful and describe their purpose

What were the common barriers?

We gained a good insight into the main barriers disabled users face when shopping online. There were several common themes and unfortunately all of the sites failed to meet the Level AA of the WCAG 2.0 guidelines.

This means that disabled users would face difficulty in buying a product on each site, with half of the sites completely inhibiting users at certain points in their journey. The main accessibility problems are described below, with examples from across the sites.

Visible focus

This navigational technique highlights where the user is on the page visually. This is essential for sighted users who rely on visual cues to navigate with a keyboard.

As positive examples, Tesco and House of Fraser provide clear and consistent visible focus so users can see their location as they move their focus through the site. Other retailers had a mix of custom, default or no focus at all so that they relied on the default browser focus which is not sufficient since it can be unclear and inconsistent between browsers.

Below we can clearly see that the “Home Electrical” link has keyboard focus on the Tesco site as the text is underlined and is displayed in a blue colour which is distinguishable from the rest of the text on the page:

Clear visible focus on the Tesco homepage enables users to see where they are on the page.

‘Skip to’ links

For non-sighted users, ‘skip to’ links provide an easy way to move through the navigation and into the main content of the page.

Only half of the sites had implemented ‘skip to’ links meaning that keyboard users would repeatedly have to step through lengthy navigation menus, an even more tedious task for screen reader users listening to the links.

House of Fraser was a great example of a site that had clear ‘skip to’ links:

Good example of clear and visible ‘Skip to main content’ link on House of Fraser site.

Joules had more than one ‘skip to’ link but they were designed to be hidden for sighted users. Consequently, sighted keyboard users were unable to take advantage of this functionality.

‘Skip to content’ link on Joules.com does not become visible

Alternative text for images

Alternative text is read by screen readers in place of images, allowing the content and function of the images to be available to those with visual or certain cognitive disabilities. All informative images on a page should have suitable alternative text, providing all users with the same access to content.

Across our retailers, use of alternative text was generally good with appropriate and descriptive alt tags on product images. However, we did notice issues on both Boots and Mothercare where image descriptions were read to the screen reader more than once.

This was due to images having both an alt tag and identical title attribute. We recommend retailers remove titles with duplicate text to make sure the image descriptions are not repeated unnecessarily.

Product descriptions on Mothercare site are read to screen reader users more than once

Providing context to screen reader users

This is fundamental for screen reader users who are not able to visually group information together or understand meaning through visible presentation. Information and relationships must be therefore associated programmatically.

Examples of this from our retailers included:

Form fields need to have programmatically associated labels so that screen reader users know what information is required for the form input field. When a form field receives focus the label for the field (e.g. “first name”, “surname”, “email address”) should be called out by the screen reader.

This was a persistent issue across all retailers. Some sites such as notonthehighstreet.com frustratingly had correctly implemented this in some areas and not others, meaning inconsistent access to information for their screen reader users.

All retailers at one point or another had links that did not make sense out of context. Common examples found were ‘show more’ and ‘edit’. As we can see below, Mothercare.com used ambiguous links such as “edit” and “remove”.

Without the visual cues, a screen reader user would struggle to know what they are editing or attempting to remove.

Mothercare.com uses ambiguous links such as “edit” and “remove”. Screen reader users are not provided with any more context as to what will happen if they click these links

In providing important tools to select product options such as size and colour, some retailers did not provide screen reader users with all the information they need to make the purchase.

For retailers such as House of Fraser and Joules, there was no notification that a certain size was out of stock. Visually, sizes which aren’t available are scored out and in a lighter grey colour, but these sizes still get read out to the screen reader, indicating that they are available.

This would prevent a screen reader user from choosing a product size, and they would need to either give up or ask for assistance.

The colour and size selection/availability on the Joules site are visually clear, but not conveyed programmatically for screen reader users

What we learned:

With physical accessibility in store being such a challenge, online retail may seem the ideal solution. Unfortunately, retailers who fail to consider the issues and barriers mentioned above will not provide the answer for many disabled people.

Most retailers had reassuring text on their sites describing their dedication to making their online offerings accessible. Most had also implemented some accessible features on their sites – for instance alternative text for images was widely implemented – yet shortcomings were readily found.

Since these accessibility barriers were identified through a relatively short accessibility audit, retailers need to build on these great intentions and implement WCAG 2.0 to significantly improve accessibility across their sites.

Retailers should consult with accessibility and UX experts to fully understand the needs of disabled customers and the technical solutions to provide accessibility.

Once the identifiable accessibility barriers have been removed, the retailers should involve people with disabilities in usability testing to ensure that the site is usable for this audience as well as compliant to WCAG standards.

Many thanks to my colleagues Marie Moyles and Natalie Simpson for leading the accessibility analysis of the retailer websites.