{{ searchResult.published_at | date:'d MMMM yyyy' }}

Loading ...
Loading ...

Enter a search term such as “mobile analytics” or browse our content using the filters above.

No_results

That’s not only a poor Scrabble score but we also couldn’t find any results matching “”.
Check your spelling or try broadening your search.

Logo_distressed

Sorry about this, there is a problem with our search at the moment.
Please try again later.

At the end of 2016 the BBC reported that retailers could be "missing out on £249bn because many are inaccessible to disabled customers". 

But what about the digital high street?

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.

Chris Rourke

Published 16 February, 2017 by Chris Rourke

Chris Rourke is Managing Director of User Vision and a contributor to Econsultancy.

24 more posts from this author

Comments (4)

Jack Hutchinson

Jack Hutchinson, Digital Marketing Specialist at JCH Web

I've just been on the House of Fraser website and the "skip to main content" link appears to be hidden. It appears to work like the Joules website.

2 months ago

Louise Linehan

Louise Linehan, louise@pi-datametrics.com at Pi Datametrics

A really interesting article - but, like Jack, I also visited the HoF site and am unable to see the 'Skip to main content' link.

2 months ago

Avatar-blank-50x50

Matthew Taylor, Graphic Designer at Places for People

Well as far as I can see, the W3C Web Accessibility website is ironically not very 'accessible'. A confusing mess of words and nonsense. Another set of rules created by a box ticker, and displayed in a manner that is not approachable, digestible or clearly segmented — all three which fundamentally make a website more accessible from the off.

2 months ago

Chris Rourke

Chris Rourke, Managing Director at User VisionSmall Business Multi-user

Apologies for the confusion folks. The Skip to link is made available for keyboard users and it appears in the House of Fraser site when it has keyboard focus, i.e. if you ‘Tab’ to it by pressing the tab key once after you arrive on the site. This lets users not using a mouse see the skip to link early as they use the site, so they can go straight to the main content if they want.

The Web Content Accessibility Guidelines mandate that the skip to link must become visible on keyboard focus but can be hidden at all other times (e.g. when they are not needed).

On the other hand, the Joules site does not offer visible feedback to the user that they can go to the content. Tabbing into that site shows that the visible focus effectively disappears for 2 steps reappearing when the ‘Sign in’ link get focus (If you have link destination notifications set on your browsers it shows that one is going to #skip-to-content and the next one is to #skiptonavigation). Therefore the Joules site would fail a WCAG audit and is deemed to be less accessible for disabled people (and specifically sighted keyboard only users).

2 months ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.