The Accessibility Enhancement Act, which sets out the minimum accessibility requirements for the vast majority of websites, came into force in Germany in June 2025. Companies face heavy fines and, in the worst-case scenario, even the takedown of the website in question should they fail to comply with the Act. Reason enough to take a look at the most common accessibility errors.
Contents
Accessibility means that everyone, regardless of any physical or mental limitations they may have, can interact with their environment. Everyday examples include traffic lights with audio signals for people with visual impairments or ramps for people in wheelchairs.
When it comes to websites, the English term ‘accessibility’ is usually used. The main aim here is to ensure that everyone can perceive, understand and interact with the content. Many websites are unusable for people with visual impairments or motor disabilities. For this reason, care must be taken to ensure that a website is suitable for use on various devices and with assistive technology such as screen readers, and that alternative methods of interaction, such as keyboard navigation, are available.
All these requirements are governed by the W3C’s ‘Web Content Accessibility Guidelines’ (WCAG) and are also cited as minimum requirements in the new Act to Strengthen Accessibility.
The WCAG are the standard for web accessibility and form the basis for relevant legislation in Europe, the USA and other regions. According to a 2024 study by the non-profit organisation WebAIM, just under 96 per cent of the top 1 million most popular websites are still not WCAG-compliant. [1]
On average, these sites contain a whopping 56 errors that were detected by automated testing. However, as only a small proportion of the WCAG criteria can be tested automatically, the actual number of unreported errors is likely to be far higher.
We would therefore like to highlight the most common errors and show how they can be rectified.
Good contrast between text and background is essential for the readability of a website. Poor contrast makes text unreadable and prevents control elements from being recognised. The WCAG therefore stipulate a contrast ratio of at least 4.5:1 for body text and 3:1 for large text elements, such as headings.
The contrast ratio can be easily determined and improved by using either the browser’s developer tools or specialised online tools into which the colour values are entered. For example, WebAIM’s Contrast Checker is a good choice for checking the contrast ratio. [2]
(Screenshot: Chrome Developer Tools. The image shows that the contrast ratio is 9.84, which is well above the minimum of 4.5.)
If images contribute to the content of a page, they require alternative text for people with visual impairments. Missing alt text means that important information is inaccessible and, in some cases, the content of the page cannot be understood. For this reason, the so-called ‘alt’ attribute must be present for every image. Care should be taken to ensure that the description makes sense within the context of the website. Even images that are purely decorative should have an empty alt text: alt="". This tells a screen reader that this image can be ignored.
However, meaningful alt text is also beneficial for sighted users, as the descriptive text allows them to understand the content even if an image fails to load.
Labels are used so that users understand what should be entered in a form field. This is also important for voice control: for example, users can say ‘Jump to the email address field’ to navigate through the form.
The label can be linked to the input field using the ‘for’ attribute. The advantage of this approach is that the label can also be clicked to edit the field. This detail is particularly relevant for small elements, such as radio buttons.
(Sample code for an accessible input element)
A common mistake is using the ‘placeholder’ attribute to label an input field. This is incorrect, as it does not convey the meaning of the input field and the placeholder text disappears once the user has entered text. Consequently, even sighted users are unable to identify any incorrect entries once a form has been completed.
Empty links are links that have no text content. They often contain only images or icons. When using empty links, care must be taken to ensure that text can be identified. This is achieved either by using invisible text content or a so-called ARIA label. ‘ARIA’ stands for ‘Accessible Rich Internet Applications’ and is an extension of HTML that adds special accessibility attributes. These can be used to improve accessibility. However, they are generally not necessary provided that the HTML has been written correctly.
(Example: This link contains only an icon, but no text content.)
This error is essentially the same as the fourth point, as HTML button elements also require a text label that can be read by a screen reader and used for voice control. Icon buttons are very common, but cannot be distinguished by screen reader users. Furthermore, usability tests consistently show that buttons consisting solely of icons, without any label, are often not interpreted correctly even by sighted users. In this respect, a label is helpful for all users.
The language of a document is defined using the ‘lang’ attribute in HTML. For example, a page in German requires the attribute ‘lang=de’. The attribute is set within the outermost tag, the HTML tag, and tells the screen reader in which language the text should be read aloud. Incorrect language definitions result in the text being read aloud in an incomprehensible manner. If individual sections use a different language, this must also be specified at the appropriate point.
Good headings are a key element for screen reader users, enabling them to jump quickly to relevant content without having to have every single word read out to them.
HTML provides six heading levels, from ‘h1’ to ‘h6’, which must be used in the correct order.
(Screenshot: The order of the headings is incorrect and one level (h3) has been skipped.)
Exactly one ‘h1’ may be used on each page. The remaining heading levels may appear multiple times, but must be used in the correct order.
Incidentally, the correct use of heading formats is also recognised by search engine crawlers, thereby improving your website’s SEO ranking.
When using JavaScript frameworks, many developers are increasingly using div elements that have no semantic meaning. This is referred to as ‘div soup’, in which no context can be recognised.
A better structure can be created by using so-called ‘landmarks’. ‘Landmark’ elements help screen reader users to navigate quickly between important sections, such as the main content (‘main’) or the navigation (‘nav’).
When using the keyboard, it must always be clear which element currently has focus. By default, this is indicated by a blue border.
Some mouse users find this visual cue distracting, which is why focus styles are often disabled on many websites. Unfortunately, this makes it impossible to use the keyboard.
Yet there is a simple solution to this aesthetic issue: using the CSS pseudo-class ‘:focus-visible’, the focus style can be styled separately specifically for keyboard users.
(Screenshot: Input field with focus outline)
Unfortunately, the vast majority of websites still contain serious accessibility errors. The good news is that many of these can easily be avoided by following a few basic rules. This means that accessible development need not be a cost driver, but can instead be a great opportunity.
As well as ensuring legal compliance, an accessible website opens up new target groups and improves the user experience for everyone, which in turn leads to increased turnover and satisfied customers. Last but not least, we are all contributing to a more inclusive society.
Sources:
[ 1]https://webaim.org/projects/million/
[2] https://webaim.org/resources/contrastchecker/
You can find out more about user experience for businesses on our website. Please feel free to get in touch via the contact form!