Increase the accessibility of your online shop: legal requirements and tips for implementing accessibility!

Inclusion is increasingly taking place on the internet. The legislature has already recognized the importance of accessible websites and already requires public entities to provide accessible and usable information for people with disabilities.
What many people do not know is that similar regulations will also apply to companies from 2025 onwards. However, there is also good news for you: implementing these requirements will be rewarded by search engines as well as by your customers. So, if you want to learn more about the legal requirements and how to comply with them, be sure to keep reading.

Table of Contents:

Accessibility in online shops: Legal foundations that you should definitely know

There are a whole series of regulations that are intended to regulate the accessibility of websites and mobile apps. We will now show you which ones are already in effect and which ones will be relevant in the near future.

Already in effect: Guidelines and regulations for public entities

EU Directive 2016/2102

The EU Directive 2016/2102 is a directive of the European Union on the accessible access of websites and mobile applications of public entities. The directive is intended to ensure that people with disabilities are not disadvantaged when using websites of public institutions on the web.

Barrier-free Information Technology Regulation (BITV 2.0)

The Barrier-free Information Technology Regulation (BITV 2.0) is the German implementation of the EU Directive 2016/2102. The regulation requires public entities, such as authorities, universities and schools, to design their websites and mobile applications in an accessible manner. The requirements of the BITV 2.0 are largely based on the international Web Content Accessibility Guidelines (WCAG).

Web Content Accessibility Guidelines (WCAG)

The Web Content Accessibility Guidelines (WCAG) are international standards for the accessible design of smartphone apps and websites. The guidelines describe how websites and applications can be designed to be more accessible for people with disabilities. They provide recommendations and guidelines for the general presentation of content, such as text, images, audio and video, as well as for navigation and interaction with the website.

The WCAG is divided into three levels: Level A, Level AA, and Level AAA. Each level has different requirements and goals that must be met to ensure a certain level of accessibility. Most organizations aim for at least Level AA, as it provides a high level of accessibility while maintaining a healthy balance between effort and benefit. That is why this level is considered the gold standard for accessible design in many countries.

The WCAG Level AA includes:

• Text alternatives for all non-textual content such as images, videos or audio.
• Good color contrast ratios so that text is readable for people with visual impairments.
• Easy navigation and orientation on the website, e.g. through a clear heading structure and meaningful links.
• Possibilities to adjust the presentation, e.g. by increasing font size or contrast.
• Usability of the website without a mouse, e.g. by allowing all functions of the site to be controlled via the keyboard.
• Avoidance of content that can trigger seizures, such as flashing images or rapidly changing colors.

Did you know? Similar regulations will apply to companies from June 28, 2025.

The European Union has passed a law that obliges most companies to increase accessibility for products and services. In Germany, an excerpt of the European regulation already exists.
You didn’t know that? You’re not alone! We summarize the European and German drafts for you.

European Accessibility Act (EAA)

The European Accessibility Act (EAA) is a regulation of the European Union that was already adopted in 2019 and came into force on June 28, 2022. However, a transitional period of three years was set. This means that the regulation will become mandatory for all companies on June 28, 2025. The EAA is intended to improve the accessibility of products and services for people with disabilities throughout the European Union.

The regulation affects a variety of products and services, such as computers and operating systems, banking services, telecommunications, transportation, e-books, and e-commerce. Like the BITV 2.0, the EAA is strongly based on the requirements of the WCAG for the latter. As a European regulation, the Accessibility Act applies to all companies that distribute goods in the EU member states.

Barrierefreiheitsbestärkungsgesetz (BSFG)

The Barrierefreiheitsbestärkungsgesetz (BSFG) is essentially the German excerpt of the EAA. The aim of the law is to improve the accessibility of websites and mobile apps in Germany and to ensure that they comply with the Web Content Accessibility Guidelines (WCAG) at level AA or higher.

Am I perhaps exempt from the requirements?

You may be wondering if you or your company might be exempt from the requirements. The good news is that there are actually exceptions to the accessibility requirements. The bad news is that they only apply to very small companies. If your company employs less than 10 people, you do not have to meet the requirements of the EAA and the BSFG. The same applies if you do not exceed an annual revenue threshold of 2 million euros.

Accessibility and SEO: More visibility for your e-commerce platform

Even if you are affected by the exception rule of the EAA and/or the BSFG, it is still worthwhile to implement the standards of the WCAG and thus improve the accessibility of your online shop. Why? Because accessibility is one of many factors in search engine optimization.

Best Practice: New webshop at KUBO

ESYON has realized a particularly user-friendly e-commerce platform for KUBO Tech AG. Clear color contrasts and intuitive navigation make the user experience particularly accessible. Google rated the store for its accessibility with 94 out of possible 100 points. We have reviewed the project in our blog.

Read the case study

Improve SEO ranking and customer satisfaction: More accessibility in your online shop

Adjust font sizes

To ensure that texts on your website are ideally readable, you should choose an appropriate font size. The font size should not be less than 16px for both desktop and mobile display.

Simplify expression

People with a migration background or dyslexia may find it difficult to quickly grasp the content of websites. Therefore, use simple expressions and avoid abbreviations, technical terms, or foreign words if possible. Whenever it is not possible to avoid them, you should formulate short explanations for your readers or provide a translation.

If you want to check the readability of your texts, you can use the so-called readability index (LIX) (German). This determines a score that is based, among other things, on the number of longer words (more than six letters) and the average sentence length.

The LIX distinguishes between the following types of texts depending on the score:

• under 40: children’s and young adult literature
• 40 to 50: fiction
• 50 to 60: non-fiction
• over 60: technical literature

Important: Since texts can vary greatly from one another depending on the complexity of the topic, the readability index is no more than a rough guide.

Using ALT attributes

ALT attributes, also called ALT tags, describe an image in a few words and are read by software for the visually impaired.

Since the allocation of ALT tags has been of great importance for search engine optimization for years, almost every content management system (CMS) and every shop system nowadays has a way to attach ALT tags to images. Some systems automatically generate generic ALT tags when inserting images into a website. However, these are more for pleasing Google & Co., as search engines penalize the absence of ALT attributes. These short descriptions cannot contribute to the accessibility of your site, which is why you should always assign your ALT tags yourself.

Assigning ARIA roles

Like ALT attributes, ARIA roles also contribute to the usability of your site with reading tools for the visually impaired. ARIA roles define the purpose of individual elements of your site. For example, the tag role=”button” indicates to the reading tool that the respective element is a clickable button.

If you use a modern theme for one of the common CMS/shop systems, you probably don’t need to do anything else. Nowadays, most themes come with correct assignment of ARIA roles by default. You can easily check whether this is the case with your theme using Google Lighthouse.

Matching color contrasts

As mentioned earlier, a successful color contrast ratio is an essential part of the WCAG. With Google Lighthouse, we have already introduced a way to evaluate the contrast of your e-commerce platform. However, this evaluation assumes that your site is already live. It makes more sense to consider the contrast already in the conception of your web design. For this purpose, there are numerous tools that allow you to match foreground and background colors, such as the Contrast Checker from siteimprove.com.

Subtitling videos

Subtitles allow deaf users to better understand the content of your videos. The same applies to users who do not currently have access to or do not want to use sound, making subtitling doubly worthwhile.

Platforms such as YouTube or Vimeo allow you to create automatically generated subtitles based on the audio track. However, since these are not 100% accurate, you should carefully check and edit the subtitles manually.

Marking links

To further improve the readability of your site, links should be clearly distinguishable from regular text and not only stand out in color but, if possible, also be underlined. In addition, you should give each link its own anchor text. If you link images, you should label them so that the link is also recognizable to the user.

Navigation by tab key

Have you ever tried to navigate the web using only your keyboard? Most people will probably answer this question with a “no.” Even though Level AA of the WCAG clearly requires keyboard navigation, this is still unfortunately a niche topic. Users who are used to navigating a page using a touchscreen or mouse typically don’t think about the fact that this should also be possible with the press of a button. However, current browsers already have the basic functionality for this. Usually, navigation using the keyboard is accomplished using the tab key.

When the key is pressed, the cursor jumps from one link to the next. The selected element should be visually highlighted (e.g. with a border). Most systems already support keyboard navigation by default. However, some elements can make keyboard navigation more difficult, such as slideshows, iframes, or dynamic elements. It’s best to try navigating your own site using the keyboard and get an idea of its usability. If you find that there are problems navigating through your content at any point, you should adjust the display and possibly use other elements.

Completely controllable with the keyboard: The new webshop from erfal

We were already able to accompany the Saxony-based manufacturer of sun and insect protection products in launching their first online shop in 2016. Since then, it has received a redesign with a focus on responsiveness and accessibility. Users can navigate freely through the webshop using the tab and enter keys. In an exciting interview, Webshop Manager Martin Spinnler shared his impressions of the project.

Read the case study

Conclusion

Accessibility in online shops plays an important role for the legislator – and rightly so. The problem is that the regulations have not yet reached those who are supposed to implement them, i.e. the companies. We hope we have given you a good insight into the topic and answered most of your questions with this post. If there are still open questions, please feel free to contact us!

Frequently asked questions about accessibility in online shops

What guidelines are there for accessibility in online shops?

The Web Content Accessibility Guidelines (WCAG) are an internationally recognized standard for website and mobile app accessibility. They declare requirements and recommendations for design based on three levels: Level A, Level AA, and Level AAA. The European Accessibility Act (EAA) and the Barrierefreiheitsbestärkungsgesetz (BSFG), which regulate accessibility at the European and federal levels, are heavily oriented towards the provisions of the WCAG.

What does WCAG Level AA mean for accessibility in an online shop?

WCAG Level AA is the middle level of the WCAG and is often seen as the standard for website and mobile application accessibility. An online shop that meets WCAG Level AA should be accessible to most users and eliminate obstacles that could prevent people with disabilities from using the shop.

What are the benefits of accessible design?

The benefits of accessible design for an online shop are:

• Accessibility to a larger target group
• Compliance with legal requirements
• Image and brand building as a customer-oriented company
• Improvement of the user experience for all customers