Around 80 million citizens in the EU live with impairments such as visual impairment, motor or cognitive disorder, or hearing disability. We’re talking about 10 to 30 percent of the population who can’t fully use websites as a result.
Aktion Mensch and Google, in collaboration with the Pfennigparade Foundation and the consulting agency BITV-Consult, have tested the accessibility of the most visited online shops in Germany. The results of the test show how much action companies need to take by 2025: 75 percent of the shops tested were not accessible.
Accessible websites in the private sector are still in their infancy. This is set to change with the European Accessibility Act (EAA): corporate websites and e-commerce shops must be accessible and usable for all users in the European Union by 2025. Accessibility will effectively become mandatory. Germany is implementing the EU directive with the Barrierefreiheitsstärkungsgesetz (BFSG). This law comes into effect in 2025.
The foundation for implementing accessibility is the Web Content Accessibility Guidelines (WCAG). These internationally recognized guidelines have defined the technical standard for designing and developing accessible websites since 2018.
Online shop operators, UX designers, and web developers would do well to consider accessibility and device independence from the very beginning of the development process: Accessibility first! The goal shouldn’t just be to meet legal standards from 2025 onwards. The aim should be to make digital offerings easily usable for everyone through new design principles.
Test Results for the Accessibility of German Online Shops
The accessibility test of German online shops examined 78 websites, which have a complete e-commerce webshop (from searching to completing a purchase). The 8 most important criteria of the Web Content Accessibility Guidelines (WCAG) were evaluated.
The results show that 75 percent of the shops tested were not accessible.
A lack of keyboard operability was the most common barrier. 61 out of 78 websites tested could not be operated with the keyboard alone.
Moreover, testers with visual impairments on many of the websites examined faced the challenge of a lack of contrast color.
Another hurdle was pop-up content such as banners, which testers could not close on the website.
On a positive note: the tested pages that met the criterion of key operability were often also accessible in other respects. All 17 of them met the criterion of clear labels when filling out forms.
At least 15 out of 17 pages already offered the simple resizing of text (“Pinch-to-Zoom”) to achieve better readability of the website.
On at least twelve out of 17 websites, interactive controls (“Hamburger Menus”) in the ordering process were correctly labeled; their respective status (e.g., the pre-selected size for clothing) was correctly read out, and users could easily change the selection. For these 12 sites, testers were able to navigate successfully through the entire purchasing process.
What are the most common barriers on the web?
Basically, a distinction can be made between technical and content-related hurdles on websites and e-commerce shops.
Technical barriers are:
- Many websites cannot be accessed and navigated via keyboard or voice commands.
- Not readable for screen readers and braille displays. Screen readers and Braille displays are an aid for blind people. Screen readers reproduce the contents of a website via audio files. Clear semantic HTML structuring is required so that the texts, tables and forms can be correctly read by the screen reader and the Braille displays on the keyboard.
- The alternative text (alt texts) is missing from the images. Screen readers and other assistive technologies can only describe and correctly interpret the image if a so-called ALT tag is deposited.
- Many websites are based on old technology. This means that these websites are not responsive and are difficult to use on smartphones and in modern web browsers.
- Scalability (enlargement) via the web browser is insufficient or blocked via the website.
Content-related barriers can be:
- Very often colours and fonts are used incorrectly, are too small, lack contrast and can thus only be insufficiently perceived by people with a visual impairment.
- Blind people in particular have problems when content is linked to colours. An example: “Click the green button at the bottom right”. CTAs (call-to-actions) with combined text and colour information are hardly decipherable for blind people.
- The texts are too complex and difficult to understand.
- The videos lack audio descriptions of the images (audio description) and subtitling for the hard of hearing and deaf.
The new European Directive (EAA) and the Barrier-Free Act (BFSG)
The new European Accessibility Act aims to open up new market opportunities for companies and to offer people with disabilities a wider range of accessible products and services. This EU directive thus places an increased obligation on private and commercial companies to make their products and services accessible from 2025.
The initial focus is on the user-friendliness of
- ATMs,
- Ticket and check-in machines,
- communication services,
- Platforms and services for online trading and e-commerce,
- Banking services and
- Air, bus, rail and sea transport services.
Micro-enterprises with fewer than ten employees and an annual turnover of less than two million euros are exempt from the EU regulation. However, this exemption does not apply if digital services are offered and sold.
The respective EU member states are required to formulate and monitor this by law.
Germany has introduced the new regulation with the Barrier-Free Act (Barrierefreiheitsstärkungsgesetz, BFSG). The law comes into force in 2025 and obliges private companies to be barrier-free. Transitional provisions are set until 2030 for services and 2040 for self-service terminals.
Finally, the individual federal states are to monitor compliance with the requirements. How strictly this is actually punished and what sanctions are threatened is still unclear.
Accessible Online Shops: Tools and Tips
Accessibility should already be taken into consideration in the conception of a website/online shop. The following tips and tools should help you to implement your web project and make it easier for people with disabilities to use your website.
Use contrasting colours
In general, colour combinations often lack contrast. If you use fine fonts, you need a higher contrast and the smaller the font, the higher the contrast to the background should be. Especially on smartphones, take sunlight and reflections into account! Also, test the black and white contrast – this can often appear too intense.
You can extensively test whether your colors have the ideal contrast with the contrast checker and contrast calculator.
Watch out for colour blindness
Red-green vision loss is very common and affects almost one in ten men. People with deuteranopia (green vision impairment) or protanopia (red vision impairment) cannot distinguish between the two colours. You can test how this looks with the colour blindness simulator. In general, try to use colours sparingly and to clearly distinguish between them.
Offer night mode (Dark Mode)
The dark mode of a website is not only particularly popular with developers but also helps people with special eye diseases (such as lens opacities) to read. Many users report that their eyes tire less quickly in night mode or are relieved on smartphones in sunlight. Night mode is a nice-to-have, but not a must!
Use sans serif fonts, avoid fine or bold weights.
Sans serif fonts are recommended for people with visual impairments. Depending on the font, the use of regular weights is recommended. Avoid light and bold weights as much as possible. Use emphasis (bold) sparingly. Capital letters also make it difficult for people with impaired vision to read. Bear in mind that there is even a special typography for people with dyslexia (spelling and reading difficulties). It has been shown that dyslexics also prefer sans serif fonts in which the letters can be easily distinguished from each other.
Font size not less than 14px
With a font size calculator, you can practically determine the ideal font size according to DIN 1450. Ideally, calculate the minimum size for smartphone, tablet and desktop screens. Increase the font size by 10 percent if light text is used on a dark background. For line spacing, the rule of thumb is at least 120 % of the font size. For continuous text, the line length should be a maximum of 80 characters and left-aligned. Avoid centered and right-aligned flats as much as possible. Also, keep in mind that text is not necessarily placed over images or colour gradients.
Use semantic HTML markup: Semantic HTML markup helps screen readers recognize the structure of a website and accurately convey this information to users. This is done by using appropriate tags in the HTML such as <header>, <nav>, <main>, <article>, <section>, etc., which assign a meaning to each element of the page.
Use ARIA attributes: ARIA (Accessible Rich Internet Applications) attributes help assistive technologies interpret dynamic content and user interface components more accurately. For example, ARIA landmarks allow screen readers to identify important sections of a website such as headers, footers or main content areas.
Additional helpful usability tips can be found in my post here in German.
Accessibility Check: Is your online shop accessible?
You can quickly test whether your e-commerce website is accessible yourself in an online check with the free browser tools WAVE and AChecker.
If your website or shop is based on WordPress, you can also easily do an online accessibility check with the free plug-ins WP Accessibility and One Click Accessibility.
Tips for the Accessibility Check with WAVE
WAVE evaluates websites according to the criteria of the Web Content Accessibility Guidelines WCAG 2.1, which form the basis for the legal requirements of the FSO and the EU Directive. It is important that your website at least reaches the conformity level AA of the WCAG.
- Test in the “No Styles” view: all stylesheets are deactivated and you can check whether the reading order fits.
- WAVE displays the alternative text next to the image. Make sure that the alt text is coherent and easy to understand.
- The code panel in WAVE is useful, for example, to evaluate the label and input fields in forms.
- The browser extension can also be used to test dynamically generated content from scripts and password-protected pages.
Once you have implemented the adjustments from the tools, you can check the website again using the WCAG checklist of the BITV test and, finally, actively test accessibility via keyboard and in a screen reader such as VoiceOver (Mac) or NVDA (Windows).
If you want an official confirmation, the BIK BITV test is recommended. This is a fee-based procedure for comprehensive and reliable testing of the accessibility of websites by selected experts in Germany. The BITV test defines 98 test steps. The test directory contains (in addition to the WCAG 2.1 criteria above) 38 further requirements that EN 301 549 formulates for web content.
Conclusion
The new European directive brings new attention to the topic of accessibility in the digital industry and not least puts private companies under obligation. UX designers and web developers are primarily challenged to design and implement all upcoming projects and digital offers barrier-free.
The best orientation is still provided by the Web Content Accessibility Guidelines of the W3C. With the help of a browser tool such as WAVE, you can easily subject your online shop to a basic accessibility check.
Simplifying designs and prioritizing accessibility is the motto with regard to 2025. And the good thing is: if digital services and offers are easier and simpler to use, this creates advantages for all people, whether with or without limitations.
About the author
Stephan Raffeiner is a digital marketing expert and blog author. He is a course instructor and works as a web designer. On digitalmarketingblog.it he writes about online marketing topics, e-commerce trends and reports on the latest in WordPress, UX/UI design, SEO, digital analytics, social media, and Web3.
***
Discover the latest e-commerce trends and boost your business – join our community:
