How accessible are online stores?

How accessible are web shops for visitors with disabilities? Can someone who is blind order the weekly groceries? Can someone who can’t use a mouse buy a new winter coat without having to leave the house? 

Level Level investigated the order flow of 15 of the largest online stores in the Netherlands for web accessibility. From accepting cookies up to pressing the button to pay.

We researched the Dutch versions of: Apple, H&M, Coolblue, HelloFresh, Amazon, IKEA, Bol.com, Zalando, Albert Heijn, Jumbo, About You, HEMA, Wehkamp, De Bijenkorf, MediaMarkt.

Conclusion: with more than half of the 15 webshops it was impossible or very difficult to place an order when you are blind. There are also positive examples: Apple, H&M and Coolbue perform better, accessibility wise. But for all websites counts: there is still a lot to improve on.

The research is done from July upto November 2021. The complete report is written in Dutch, published on the Level Level website “Werk aan de webwinkel” and also available as PDF Hoe toegankelijk zijn Nederlandse webwinkels in 2021? (4Mb). This post summarizes the findings.

In 2022, the new European directive, the Accessibility of products and services, Directive (EU) 2019/882 will come into effect. Large online stores need to make their services accessible to people with disabilities. 

From June 2025, this will apply as legislation in the Netherlands and will also be enforced.

We wondered: how accessible are our webshops? Which have a lot of work to do in the next three years and which have already thought about accessibility?

We didn’t perform a full audit of the accessibility of all functionalities, but opted for a pragmatic approach. Can someone who can’t use a mouse, or can’t see the screen, actually place an order? 

We examined the 15 largest webshops (in 2021), where the entire ordering process is handled within the website. Not by checking all the accessibility issues on all the pages, but by trying if it’s actually possible to place an order. 

For this we divided the process into 18 steps. Each step answers a question that starts with “can I”:

In these steps we manually checked for keyboard and screenreader performance. 

With the free automated test tool axe Devtools we examined the differend accessibility errors. Errors like: missing alternative text with images, unlabeled form fields, missing text for buttons and links.

We checked manually if it is possible to ask for help on the website itself, so not only via Social Media.

Only on the websites of Apple, H&M, Coolblue, Hello Fresh and Amazon it is possible to place an order with a keyboard and screen reader. 

It’s impossible to create an account with a keyboard or a screen reader with IKEA, About You, HEMA, Wehkamp and de Bijenkorf.

With Zalando it’s impossible to enter a shipping address; with Jumbo and MediaMarkt it is impossible to enter a delivery time.

Concluding that with 8 of the 15 webshops you cannot order when you are blind.

Apple, H&M, Jumbo, de Bijenkorf, About You and HEMA provide good accessible help on their website.

HelloFresh, IKEA, Bol.com and Wehkamp use an inaccessible chatbox. With Coolblue and Albert Heijn the telephone number is hidden for a keyboard user.

The help of MediaMarkt is only available for questions about orders, Zalando’s contact form has accessibility issues. 

Amazon provides a telephone number for screenreader users in a hidden menu item that is only available when you are logged in. This is very hard to discover.

We found that all websites contain serious code errors. Apple, IKEA and H&M perform relatively the best and MediaMarkt had the most code errors.

The total score is based on:

Oh, how we like to make functionality beautiful. Fancy design elements such as slide-out panels, tooltips and pop-up windows for example for contact information or the contents of a shopping cart. Many of those options need special care to be accessible.

When choosing a payment method, many shops use radio buttons, combined with a drop-down option below for the payment options. If you can’t see this, it’s pretty much impossible to understand. A blind visitor can completely miss how to enter payment information.

Essential information, like a telephone number, which can simply be listed as text on a web page, is hidden and cannot be accessed with the keyboard. 

Please keep in mind: the visitor mainly wants a website to work.

A blind screen reader user doesn’t know what a button does, if that button only contains an icon and no text; and they only hear “button”. That is very inconvenient when that button is the shopping cart or the order button.

When a product is on sale, the suggested retail price is often crossed out and the sale price is displayed in the red. You can see that. But if this difference is not announced, a blind visitor will not know what the real price is.

With one webshop payment is impossible for a screen reader user because the images of the various banks don’t have alternative text. You can see, but not hear the bank logos.

Texts must be legible. Albert Heijn and Coolblue use blue in their corporate identity, which have a too low colour contrast for texts against a white background. The color is too light.

Some websites use light gray for texts and icons. Many visitors can hardly distinguish this from a white background.

Keyboard users use the tab key to navigate: to jump from link to button to input field. And then it is nice if you can see where you are while navigating. This is called visual focus. If this is missing, as with HEMA, a website is incredibly difficult to understand and operate with a keyboard.

Other common issues:

It is a laborious task to first have to go through all the menu items and the options in the filter for each page before you get to what you actually want to do. At Wehkamp, ​​there is a keyboard trap in the carousel for the images of a product, the keyboard focus continues in a circle, you can’t reach the ‘Add to cart’ button.

The code of the web pages, the HTML, contains serious errors on all websites.

This not only affects the accessibility, but also the functioning and robustness of the website. Many errors in the code indicate the lack of proper quality control in the entire development process.

It is striking that creating an account and the ordering procedure perform worse than the search options and display of the products themselves.

Common code errors include misprogrammed radio buttons, checkboxes, and drop-downs that only work with a mouse.

There are major differences in the quality of accessibility within the various steps of the ordering process. At Zalando, the webshop itself is reasonably accessible, but the payment system is not at all.

The quality control of websites should at least be tested with a keyboard and a screen reader from the beginning to the end of the order process. In addition, this significantly improves the quality of the code. And the programmer also experiences what it is like to have to press the tab key 150 times to get to the order button.

Almost all webshops responded to the results of this research. They will work hard to comply with the new legislation in 2025.

IKEA took action immediately and hired the Dutch accessibility expert Erik Kroes to help make their websites accessible. And Bol.com organised an accessibility awareness month for the web team.

This is hopeful for the future.

What can you do as a webshop owner?

We train developers, designers and content creators. Consider yourself a web builder? In any way, shape or form. We’ve got just what you need!

Our web accessibility courses.