Accessible design of online shops

How retailers should prepare their web stores for the Accessibility Improvement Act

18.12.2024

by Julia Pott

A person at a laptop interacts with a holographic e-commerce dashboard that displays various sales figures, customer ratings and similar data; Copyright: Adobe Express

In 2025, the Accessibility Reinforcement Act will come into force. For webshop operators, this means that they will have to ensure that their services are accessible for people with disabilities. But what does the design, technical layout and user experience of online shops look like when accessibility is taken into account?

From the product search to the filter function and payment: if these processes in e-commerce are designed in such a way that they are easy to use or can be interpreted using aids such as screen readers, this makes it easier for many users. Retailers who do not want to exclude people with disabilities or elderly customer groups should consider the accessible design and UX optimization of their online stores.

More access to digital services: Accessibility Reinforcement Act

The Accessibility Improvement Act in Germany aims to improve access to products and services for people with disabilities. It obliges providers to design their services, such as webshops, in such a way that they can be used to their full extent by all users, regardless of physical or sensory limitations. The Accessibility Improvement Act follows an EU directive and applies to products and services that are placed on the market after June 28, 2025.

Product search, product overview pages & filters

Search function

To make the search function in a webshop accessible, the search field should be easy to find, accessible via screen readers and have clear labels and buttons. It is also helpful to offer suggestions as you type. Operating the search function by voice input or image search also contributes to accessibility.

Sort and filter functions

Provide sort and filter options in such a way that they are accessible via keyboard shortcuts and can be navigated easily. Sort and filter functions should be intuitive to use and it must be clear which filters are active in order to facilitate operation.

Search results and product overview pages

To make a product overview page or search results page in a webshop accessible, all products should have clearly legible product names and prices that are easily accessible by screen readers. It is important that these pages have a logical structure, with headings and labels used correctly to facilitate navigation and orientation. A clear separation of image and text elements makes it easier for screen readers to recognize the content.

Ensure that there is sufficient contrast between text and background to improve readability for users with visual impairments. Avoid color combinations that are difficult for color blind users to distinguish.

Provide a responsive design that adapts dynamically to ensure optimal viewing on different devices. All elements must also be easy to use on smaller screens such as smartphones. Make sure that elements remain easily recognizable when people with visual impairments enlarge websites on touch screens. Text sizes and image resolutions should be scalable and should not pixelate or become blurred when zooming.

What does optimizing webshops for screen readers mean?

All content in an online shop, including text, images and videos, should be made accessible for screen readers. This requires the use of alt texts for images, subtitles and audio descriptions for videos as well as a clear semantic structure of HTML elements such as buttons and menus. This means that people with visual impairments can also use web stores and websites by using assistive technologies.

How do you achieve a technically accessible webshop design?

The entire web structure of an accessible webshop should be optimized for use with screen readers by systematically using ARIA labels and roles. Such Accessible Rich Internet Applications are used to identify specific functions of HTML elements such as buttons, menus and sliders. This use of ARIA improves the accessibility of web content by allowing assistive technologies to correctly interpret the functions of the elements and make them understandable to the user.

Product detail pages & price labels

Product images: Alt texts and image descriptions

Each product image should be provided with an alt text that precisely describes the product or scene depicted. This enables screen reader users to grasp the content of the images. In addition, detailed image descriptions can be offered that go beyond simple alt texts to provide a more comprehensive representation of the product.

Product videos: Subtitles and audio descriptions

To make product videos accessible, they should be provided with subtitles for the hearing impaired and audio descriptions for the visually impaired in order to reproduce spoken text as well as visual elements and actions. Video player controls should be operable via keyboard and screen reader.

Easily understandable product descriptions

Product descriptions should be written in simple language to make it easier for people with cognitive impairments to understand. Important information such as size, color and material should be clearly highlighted. Technical information should be clearly structured and labeled.

Clear price labeling

Prices should always be clearly displayed next to the product, without hidden fees, to ensure transparency. In addition, all prices, discounts or graduated prices should be included not only as graphics but also as text elements to make them more accessible for users of assistive technologies.

Shopping cart, checkout & user login

Making the shopping cart easy to use

To make the shopping cart in a webshop accessible, it should have clear and distinct buttons for changing the product quantity or removing products that can be easily operated using both keyboard commands and screen readers. Ensure that all information such as products, prices and totals can be easily captured by assistive technologies.

Checkout process: make navigation easier

To make the checkout process in an online shop accessible, all steps of the checkout should be clearly structured and easy to navigate, for example with progress indicators. Make sure that all form fields and interaction elements, such as selection options for payment methods, are operable with a keyboard and screen reader. A step-by-step guide that is audibly accessible can make the process easier for all users.

A person holds a smartphone showing a payment confirmation, while a laptop with an online store can be seen in the background; copyright: Adobe Express

Payment systems

The payment process must be designed to be compatible with various assistive technologies. Large, clearly labeled buttons and the avoidance of CAPTCHAs or other visual verification methods help to improve accessibility.

Registration and login for new and existing customers

To make login or registration processes in a webshop accessible, all form elements should be clearly labeled. Ensure that these elements can be operated using both a keyboard and a screen reader by using appropriate ARIA labels and roles. In addition, visual and auditory feedback should be provided in the event of incorrect or successful input.

Simple language for important information on the checkout process

In an online store, the use of plain language is particularly important for texts that convey essential information, such as purchase and payment instructions, privacy policies, terms of use or FAQs. Simple language ensures that all customers, including those with reading and comprehension difficulties, can easily understand the content and feel more confident during the purchasing process.

Customer service and digital assistants

Easy 24/7 access to help services

Provide live support or chatbots to help users with problems. Make help services such as contact information, FAQs (frequently asked questions) or live chats easy to find.

Chats and digital assistants: text and voice-based

Chats and digital assistants should be available in both text-based and voice-activated form to enable access for users with different disabilities.

Relevance of accessible e-commerce for the retail sector: including customer groups

An elderly lady with glasses reads intently on a tablet, sitting in a cozy living room; copyright: Adobe Express

By implementing accessible online shops, companies actively promote inclusion and enable people with various disabilities or senior citizens to act independently and self-determined. This allows retailers to tap into new customer groups and increase their sales potential. Easily navigable, mobile-responsive and clearly designed webshops also promote customer satisfaction.

Sources: Coro Cybersecurity blog, Huntress blog