Accessible Website – An Overview

Many people have to deal with obstacles on the Internet, just like in everyday life on the street. Poorly organized headings on a website make it difficult for blind people to navigate using a screen reader – just like the lack of directional strips and tactile paving on walkways. The lack of a keyboard control option is like a staircase without a wheelchair ramp. Videos on a website without sign language or subtitles are just as incomprehensible to deaf people as the announcements at the train station.
All of this is addressed by an accessible website: It makes the Internet accessible to ALL people. This includes not only people with a disability or temporary impairment. It also applies to dyslexics, migrants or people who would rather close a confusing website immediately. This is the reason why many providers will be required by law to have an accessible website starting June 28, 2025.
As an agency for accessible websites we offer you an overview of the necessity for an accessible website, the obligations and deadlines, the most important criteria and what you can test and implement immediately:
- Why is an accessible website necessary
- Obligations and deadlines: accessible websites (deadline 2025)
- The most important criteria for an accessible website at a glance – conformity level AA
- This is how you can check your website for accessibility yourself – Take the accessibility test
- Best Practice: Two good examples of an accessible website
- Accessibility as a cost factor – What does an accessible website cost?
- Conclusion
Why is an accessible website necessary?
According to the Federal Statistical Office (Statistischen Bundesamt) in Germany alone there are approximately 7.8 million people with a disability as of 2021. According to tagesschau.de around 17 million people in Germany have difficulty understanding complex texts. The proportion of people over 60 in the population continues to grow. The arguments for an accessible website are therefore just as varied as the target group.
Articles 9 and 21 of the UN Convention on the Rights of Persons with Disabilities grant people with disabilities the right to equal access to information and communication. The ethical aspect of an accessible website is therefore probably also the most important: Providers who make their website content accessible are showing social responsibility. People who face limitations on the Internet are able to access information and services for themselves thanks to an inclusive website.
As a result, an accessible website also means a larger target group that you can reach with your website. Because we all like to buy things online, search for information, network with others in communities or find inspiration online.
Apart from that, certain aspects of an accessible website can improve the overall user experience on a website. For example, better contrast, straightforward navigation and a uniform headline structure.
Whether it’s easy read or accessible navigation – our expertise is reflected in the successful implementation of our clients’ projects. A recent example is the integration of accessible elements on the website klimaschutz-frankfurt.de.
Obligations and deadlines for an accessible website – deadline 2025
The websites of federal bodies ARE already obliged to have an accessible website. This was enacted in May 2019 through the Barrierefreien-Informationstechnik-Verordnung (BITV) 2.0 and the Behindertengleichstellungsgesetz (BGG). The Barrierefreiheitsstärkungsgesetz (BFSG) WILL also require private companies to implement an accessible website.
ATTENTION!
There is currently much contradictory information on the legal requirements for an accessible website. In particular with regard to the BFSG and businesses. That is why it has to be made crystal clear:
There are differences between the requirement for public federal bodies to have an accessible website under the BITV 2.0 and private companies under the BFSG. The BITV has 38 additional criteria that are NOT included in the BFSG. For example, government websites must provide a summary of the content in easy read. That is NOT included in the BFSG or in the WCAG 2.1 under compliance levels A and AA. Companies are only required to provide their content in a comprehensible manner.
Since mid-2019, the European Accessibility Act has also stipulated a minimum level of accessibility for private-sector website providers. This required the European member states to pass legislation to enforce the minimum requirements. In Germany, this is exactly what is happening with the enactment of the BFSG.
This means that, in addition to state institutions, companies in the following sectors in Germany are also required to offer accessible websites:
- Banking services
- Phone and messenger services
- Passenger transport services
- Providers of mobile apps for interregional passenger transport services
- E-books
- Electronic business transactions (e-commerce)
The BITV 2.0 regulation and now the BFSG are based on the Web Content Accessibility Guidelines (WCAG 2.1), developed by the World Wide Web Consortium (W3C). WCAG 2.1 distinguishes between three levels: A, AA, and AAA. Each of the levels entails different requirements. The BFSG requires compliance level AA (also including criteria for compliance level A).
If a website in the relevant industries still does not meet the criteria for accessibility by June 28, 2025, large fines of up to €100,000 may be imposed.
And what does all this mean for me?
If you are affected by the BFSG’s requirement for an accessible website, there are a few first steps you can take in the short term.
First of all, you should enable visitors to your website to report accessibility issues on your website. For example, to this end the German government offers on its website several options that are available to users: via a form, by telephone or via feedback in German sign language.
In the short term, you can also upload an “Accessibility statement” onto your website. In it, you can highlight any passages on your website with accessibility issues and describe what steps you will take to comply with the guidelines.
In this case, too, there are some regulations you need to comply with. For example, the accessibility statement must be easy to find from every subpage and must be published in an accessible format. You can find a complete guide on this topic on the website of the Federal Monitoring Agency for Accessibility of Information Technology (Überwachungsstelle des Bundes für Barrierefreiheit von Informationstechnik).
The most important criteria for an accessible website at a glance – level AA

Here you will find all the criteria that an accessible website must fulfill according to the BFSG and thus comply with the AA and A levels of WCAG 2.1. In summary, an accessible website must be structured according to 4 principles:
- Perceivable
- Operable
- Understandable
- Robust
Perceivable

According to the principle of being perceivable, an accessible website must present functions and information in such a way that they are recognizable to all users. Visual elements must be made audible, audible elements must be made visible, information must be conveyed independently of colors and, if necessary, be accessible by touch.
- Alternatives for non-text content: Alternative texts for images must reflect the content they depict. Alternatives for video and audio elements must also offer the same content. In the case of audiovisual media, subtitles, audio descriptions or videos in sign language help ensure that they are accessible to everyone.
- No text as image: Text should not be presented as an image unless it is purely decorative or vital to the content to do it.
- Information and relationships: Information, structure and relationships must be clearly understandable using assistive technologies or be available in text form.
- Meaningful sequence: Content must be presented in a meaningful order (e.g., from left to right or from top to bottom).
- Sensory characteristics/instructions: Instructions must not be based solely on sensory characteristics (e.g., “press the red button”).
- Contrast ratios and color gradients: The contrast between foreground and background colors must be sufficient (4.5:1 for normal text, 3:1 for large text). A contrast ratio of at least 3:1 should be maintained for graphic elements.
- Audio controls: Control over pausing automatically played audio files.
- Display orientation of the content: The content should not be restricted to a specific display orientation, such as portrait or landscape format. Unless a specific display orientation is absolutely necessary.
- Clear input purpose: The purpose of each input field must be recognizable using assistive technologies.
- Scalability: Fonts, areas and distances should be specified in relative units (em or %) to allow 200% magnification. Fonts should be enlargeable without the need for supporting technologies. Content should be readable without horizontal scrolling at a zoom of up to 400%. If the user adjusts the text spacing, there must be no loss of content or functions.
- Hover and focus effects: Additional content that becomes visible when the mouse pointer is moved or the keyboard focus is set must be accessible via the mouse and keyboard and must also allow the user to hide it manually.
Operable

The principle of an operable website ensures that users can use all functions of a website without restrictions, regardless of their abilities. Important prerequisites for this are: the option of using the keyboard, sufficient time for interaction, avoiding epilepsy-inducing effects, a clear navigation structure and alternatives to mouse functions and pointer gestures.
- Keyboard operation: All website functions must be operable using only a keyboard. This also includes navigation. The keyboard focus must be clearly visible. There must be no “keyboard traps” from which the user can no longer navigate away. In addition, the user must be able to switch off keyboard shortcuts for functions on the website.
- Regulation of time-limited content: Timers for time-limited content must have the option of being switched off or extended by the user.
- Regulation of moving content: Users must be given the option to pause, resume or hide moving content. Animated content may not flash more than three times per second.
- Regulation of repetitive content: Users must be able to skip or hide repetitive content.
- Clear headlines and page titles: Both the headlines and the page titles must clearly indicate the topic and the content.
- Maintaining the focus: The focus order must always remain the same when navigating the website using the keyboard. The focus must therefore not change between right to left and up to down.
- Clearly marked links: Links on the website must clearly indicate their context and purpose.
- Multiple navigation options: Subpages must be findable in several ways. For example, both in the navigation menu and via a search function.
- Visibility of mouse functions: Pop-up windows or additionally available information must be indicated by a hint. In addition, users must have an alternative to the mouse to trigger these functions.
Understandable

Content and operating elements on the website must be understandable. First and foremost, it is important to present information in the simplest way possible. For instance, by using accessible language (link coming soon) and providing definitions for technical terms. In addition, the principle of understandable content calls for a clear and predictable user interface as well as consistent navigation.
- Language: The main language of the page must be identifiable. The language of individual parts of the text must also be specified if it differs from the main language.
- No automatic change of context: Changes to the context may not be made without clear user input. For example, new windows that change the context of the content must not open automatically when navigating with the keyboard or mouse.
- Error identification and notification: In the event of input errors, the user must be informed in text form and, if available, given possible solutions. Error prevention mechanisms must be in place when making changes to legal, financial or personal data.
- Labels for user input: Labels or instructions must be provided when user input is required.
- Consistent navigation: Navigation mechanisms must be used consistently on all pages.
- Consistent identification: Components that have the same function must be identified in a consistent manner.
Robust

Robust programming should ensure that the website is compatible with assistive technologies such as screen readers or Braille printers and can process all information. However, the principle of robustness also means that websites are compatible with the user agents that are used (e.g., web browsers).
- Content parsing / syntax analysis: User agents should be able to interpret and reproduce content correctly. As a rule, this is ensured by start and end tags in the HTML or XML code of a website.
- Customization of “Name, Role, Value”: It must be possible to define and change all elements of the interface. For example, assistive technologies can collect information about the status of user interface controls and play back or activate/operate elements.
- Status messages: The use of markup is intended to enable assistive technologies to inform the user when something has changed on the website without the need for corresponding input/focus from the user.
Interactive checklist
Those are quite a lot of criteria, don’t you think? You can find a compact overview of all WCAG A and AA criteria in our interactive accessibility checklist.
This is how you can check your website for accessibility yourself – Take the accessibility test
There are several ways to test your website for accessibility issues. Starting with manual tests that you can easily carry out yourself or with the help of web accessibility evaluation tools.
Manual tests:

Keyboard navigation: Check whether all functions of your website are operable using only a keyboard. This includes navigation or jumping between fields when filling in an online form. Navigation should also follow a logical order. For example, “tabbing” from left to right or from top to bottom using the tab key. As in the case of our customer project klimaschutz-frankfurt.de.

Contrast: Check the color contrast between the text and the background. Is all text clearly visible or could there arise problems due to the color gradients? A contrast ratio of at least 4.5:1 for the text ensures good legibility.

Image descriptions: Make sure that all images have alt texts. It is important to ensure that the alternative texts actually describe the content of the images.

Text: Make sure the text is clear and easily understandable. Avoid unnecessarily long sentences or verbose paraphrases. Foreign words and technical terms should be explained clearly.

Subtitles: Check whether your videos have subtitles and audio descriptions. Additional information, such as names or the context, can be a useful addition. For example, one of our projects for Messe Frankfurt: the trailers for the Designer Community Ambiente 2024.
Automated tools:
WAVE
The WAVE Web Accessibility Evaluation Tool offers comprehensive functions for checking the accessibility of websites:
- Identification and visualization of errors: Finds and highlights accessibility issues directly on the website.
- Explanations and suggestions: Provides detailed explanations and suggested solutions for identified issues.
- Reports: Generates reports regarding the accessibility of the website.
- Compatibility: Supports WCAG (Web Content Accessibility Guidelines).

The WAVE Web Accessibility Evaluation Tool was developed by WebAIM (Web Accessibility In Mind). WebAIM is an organization that focuses on improving web accessibility and provides resources and training to help developers and designers create accessible web content. The Wave tools can be used free of charge.
AXE
AXE (Accessibility Engine) is an open source tool that was specially developed for checking the accessibility of websites. It offers the following functions:
- Automated tests: Checks websites for accessibility issues according to the WCAG guidelines.
- Integration: Can be integrated into development environments and CI/CD pipelines.
- Browser extensions: Available as add-ons for Chrome and Firefox, enables testing directly in the browser.
- Expandability: Customizable and expandable by developers.

AXE (Accessibility Engine) was developed by Deque Systems. AXE is extensible and customizable, allowing developers to identify accessibility issues early on. The AXE browser extensions for Chrome and Firefox are free of charge. Deque Systems also offers advanced paid versions and additional services, but the basic functions of the browser extensions are available for free.
Lighthouse
The Lighthouse Accessibility Check is part of Google’s Lighthouse open source tool, which can specifically check the accessibility of a website. It tests for various criteria based on the WCAG:

- Alternative texts: Checks to see whether all non-textual content is accompanied by alt texts.
- Navigability: Ensures that the page is fully operable using the keyboard.
- Color and contrast: Checks the contrast ratio between text and background.
- Aria attribute: Checks the use of ARIA roles and properties to support assistive technologies.
- Labels and instructions: Checking of form fields and other interactive elements for proper labeling and instructions.
The Lighthouse Accessibility Check is available free of charge. You can use it as part of the Google Lighthouse tool, which is integrated into the Chrome Developer Tools.
A detailed list of all web accessibility evaluation tools can be found on the website of the World Wide Web Consortium (W3C).
Best Practice: Two good examples of an accessible website
Enough theory for now. To give you an idea of what an accessible website actually looks like, we have two good examples for you here:
Deutesche Nationalbibliothek (German National Library)

The website of the German National Library is a great example of what an accessible website for a federal body can look like. As a public institution of the federal government, the WCAG 2.1 guidelines were elegantly implemented here in accordance with BITV 2.0.
To summarize, this means: The website can be accessed in several ways, is correctly named and is accessible. Images and graphic elements have alternative texts, and audio and video files offer alternative means to access the content. Abbreviations are presented in full, and the website can be enlarged to 200% and is fully operable using the keyboard. Colors are not the sole content drivers, contrast specifications are adhered to, and the site can be used without sound. Additional options in plain language and sign language also increase accessibility.
A detailed overview of all measures can be found in the Statement on Accessibility of the German National Library.
Samsung

Samsung demonstrates what an accessible website looks like on a grand scale. According to the company, accessible functions were implemented on the website in line with WCAG requirements.
For example, the slider on the start page can not only be paused, but the animation of the content can also be switched off completely without losing any context. The website also features customizable content, support for screen readers, keyboard navigation and text alternatives for images. Click here for a statement on accessibility from Samsung.
Accessibility as a cost factor – What does an accessible website cost?
You will unfortunately also read here what you will probably find everywhere: It depends. Nevertheless, we will try to answer your question a little more concretely.
The key point when it comes to determining the costs is the scope. Crucial factors for the scope of an accessible website project are:
- Your objectives – Will you first aim for a partial solution or will the entire website be redesigned from scratch?
- How relevant the implementation is for you – Are you subject to the BFSG/BITV? The highest level, AAA, requires significantly more effort to implement than the lowest level, A.
You will be impacted by the following cost factors:
- Concept: Depending on the scope, a customized concept must be created that meets your personal requirements and, if necessary, takes into account all legal guidelines for an accessible website.
- Content creation: Whether the text content for the website has to be carried over or newly created. This also applies to other media such as images, videos or podcasts.
- Language options: If other languages are required in addition to the native language, the content must either be translated or transferred.
- Programming: The effort required varies greatly depending on the amount of content, legal requirements and personal preferences and functions of the website.
Additional costs may be incurred, for example, for texts in easy read or for the production of sign language videos – especially when several languages (German, English, French, etc.) have to be taken into account. And you read correctly, there are also different “languages” for sign language around the world.
You can find here a summary of all the factors involved in implementing an accessible website. (Link coming soon).
Conclusion
In summary, an accessible website has two decisive advantages: It expands the target group for your company and at the same time makes the Internet more accessible to millions of people.
The legal aspects are somewhat more complicated: Federal public institutions are already required since 2019 to implement an accessible website under the BITV 2.0 and the BGG. Certain service providers from the private sector will be required to do so by the BFSG starting June 28, 2025. However, this does not mean that companies are subject to the same obligations as federal institutions. We therefore recommend that you familiarize yourself in detail with the laws and obligations (link coming soon) and, if necessary, read the BFSG carefully.
Ultimately, there is no getting around the fact that affected companies need to implement an accessible website – and better sooner than later in view of the upcoming deadlines. As an Agency for accessible websites we are happy to advise you and provide support with the implementation.