Blog

Is My Online Shop Accessible? – A Practical Guide to Digital Accessibility

Ariane Rosing

September 10, 2024

A woman in a wheelchair sits in a café in front of her laptop, checking if her online shop is accessible.

It’s high time to take a step toward inclusion and equality in e-commerce. Digital offerings accessible to all are not only a mandate of fairness but also a smart business decision. How can you make your own online shop accessible and EAA-compliant? Our practical guide offers concrete recommendations.

Around 101 million people in Europe live with a disability. For these 27 percent of the population, internet accessibility is essential to participate in digital life. However, in e-commerce, there is still much to do regarding inclusion and equality: According to a recent study by Google and Aktion Mensch, 4 out of 5 online shops are still not accessible.

Lack of keyboard operability, missing video captions and alternative texts, unlabeled buttons, poor contrast, and problems caused by cookie banners are just a few of the many barriers that make using digital platforms difficult – not only for people with obvious or recognized restrictions.

Digital Accessibility as a Quality Feature in E-Commerce

Accessible design optimizes online experiences so that all user groups can interact easily with a digital platform and its elements. This includes, for example, older people, for whom appropriate font sizes and contrasts are important as their vision diminishes. Added value also arises for non-native speakers, who better understand texts written in simple language. In general, anyone who wants to navigate the internet easily through clear, intuitive navigation and unambiguous content benefits.

Better usability minimizes usage barriers for all people and brings positive synergy effects for the entire customer journey and web performance. One example is SEO-friendliness: Websites with captions, meaningful subheadings, and alternative texts that are readable by screen readers are also more easily understood by Google and rewarded with better rankings. This also applies to B2B companies that want to become more visible, expand their circle of potential customers, and improve user experience by making their digital channels accessible.

How to Make Your Online Shop EAA-Compliant?

The legislature has also recognized that barriers on the internet must be removed: Starting June 2025, digital accessibility will become mandatory for online shops. The European Accessibility Act (EAA) introduces a series of new guidelines that online retailers must consider. These are codified in the Web Content Accessibility Guidelines (WCAG), for which the AA standard applies in the EU, as well as some additional principles and DIN standards. To meet these criteria, the first step is understanding what obstacles occur on your own digital platforms. Our practical guide can help identify weaknesses and strategically optimize your shop.

A granddaughter and grandmother are using an EAA-compliant platform or an accessible online shop on a smartphone.

Practical Guide for Accessible Online Shops

Consider the following 7 points to get a feel for accessibility standards and make your digital offerings EAA-compliant:

1) Document Title

The document title appears in the browser tab, showing what is on the page and is the first thing users with screen reading programs see. Therefore, the title should be as brief and informative as possible. On a product page, for example, the product name should be mentioned first, then the color of the product, and finally the label.

  • Test suggestion: Open several tabs of the same page and check what is in the document title. Can the pages be distinguished based on the tabs? Is the title too long or too short?

2) Alternative Texts for Graphics

The alternative text should describe the object and context of a graphic. If the graphic serves a function (e.g., as a button), the purpose should be conveyed (e.g., “Proceed to checkout”). Alternative texts can be omitted for purely decorative graphics.

  • Test suggestion: Testing tools can detect whether an alternative text is present, but not the quality of the description. Examine the source code in the browser and check what is in the alternative text: Is the description meaningful and conveys the purpose of the graphic?

3) Buttons, Buttons & Links

The text on buttons and links should clearly convey their destination and purpose, e.g., “Proceed to checkout” instead of just “Continue”. Buttons should be operable with the Enter key, and the subsequent action should be recognizable. Buttons that do not offer interaction possibilities should not be emphasized or visualized.

  • Test suggestion: Check whether buttons and links can be focused with the Tab key and operated with the Enter key. Can you see the focus, and is the interaction clearly highlighted?

4) Icons

Even if most icons are familiar, they are not always understandable to everyone. Even well-known icons like the customer account icon or the search icon should be labeled to facilitate use.

  • Test suggestion: Critically examine whether all icons in your shop are sufficiently understandable and whether any labels are missing.

5) Forms

Both positive and negative feedback should be visible directly on the form field and not based solely on color changes. For example, a checkmark for positive feedback is possible. An error message should convey exactly what was entered incorrectly.

  • Test suggestion: Navigate the forms with the Tab key and check the visible labels and feedback. Do the buttons work, and is the feedback understandable?

6) Design & Colors

Following the Web Content Accessibility Guidelines ensures that contrasts, letter spacing, and font sizes are EAA-compliant.

  • Test suggestion: Use a contrast checker to verify the contrast between text and background. All contrast ratios should meet the AA standards.

7) Purposeful Navigation

Avoid overloaded menus and use consistent filter options. Product configurators and alternatives to drag-and-drop filters, such as input fields, are beneficial for better user guidance.

  • Test suggestion: Ensure your navigation lists no more than seven submenu items, whether click paths are purposeful, and all filter options are understandable.

Accessible Experience: Advancing Digital Accessibility Holistically

The recommendations of our practical guide and especially the globally recognized 78 WCAG criteria make it clear that the EAA-compliant implementation of accessible online shops is not a task that can be completed in a few days by individual responsible parties. Instead, it is a development process that encompasses both technical and design aspects, as well as editorial and communicative aspects, thus requiring experts from different disciplines: IT teams that program valid codes and features (e.g., for readability by assistive tools and input aids in forms), UX and UI designers who ensure optimal usability (e.g., through intuitive navigation, appropriate typography, and contrasts), as well as content creators, product owners, and QA teams.

A woman with long hair, wearing a light brown sweater, uses sign language at a wooden table with a laptop and smartphone in a modern kitchen setting.

Still looking for the right approach to reach more people with accessible offers, gain customers, and increase conversion rates?

Discover our holistic solutions for Accessible eXperience (AX) or talk to us directly!

Discover Now! Discover Now!
Alexander Fetzer Contect for Digital Accessibility

Get in touch with us

Alexander Fetzer
Business Area Manager | valantic Experience Design
+49 176 1957 8876

Don't miss a thing.
Subscribe to our latest blog articles.

Register