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.
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.
Why this research?
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”:
- accept cookies and then use the website;
- use the main menu;
- use the search function on the homepage;
- use the filter for the search results;
- choose an item from the search results;
- view a product: title, price, description;
- change/enter options: for example color, size, number;
- put an item in the shopping cart;
- open the shopping cart and read what I have ordered;
- go to the order page;
- create an account;
- enter a delivery address;
- choose a delivery time;
- read the final amount and the delivery costs;
- choose a method of payment;
- press the order button to pay or order;
- ask for help on the website.
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.
Can I order?
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.
Can I ask for help
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.
Overall score for all 18 steps
The total score is based on:
- how easily the visitor can complete the steps;
- the code quality;
- the color contrast for texts.
Website – Score steps (%)
- Apple 94%
- H&M 89%
- Coolblue 83%
- HelloFresh 83%
- Amazon 83%
- Albert Heijn 79%
- IKEA 74%
- Bol.com 74%
- Zalando 72%
- Jumbo 72%
- De Bijenkorf 69%
- About You 64%
- HEMA 60%
- Wehkamp 60%
- MediaMarkt 50%
The biggest issues
Form over function
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.
Information is only available when you can see
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.
Poor colour contrast for text
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.
Broken keyboard navigation
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:
- at some online stores you have to navigate through the entire page with the keyboard before a pop-up, slide-out window or chat box can be reached or closed. This makes using the website a laborious and time-consuming job;
- submenu items in the main menu that only open when you hover with mouse but cannot be opened with a keyboard;
- having to start over from the top of the page every single time you choose an option from a product or filter.
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.
Poor code quality
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.
Missing overal quality control
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 to do next?
What can you do as a webshop owner?
- Provide good colour contrast for text against the background.
- Provide a clear, visual focus for keyboard users.
- Provide accessible ways to ask for help. Not everybody has social media or can make a phone call.
Long term changes
- Learn the web team accessibility. Everybody: stakeholders, project managers, designers, developers and content creators.
- Start with accessibility from the start of creating or changing the functionality, not at the end.
- Set up an uniform quality control system throughout the whole customer journey.