[et_pb_section fb_built=”1″ admin_label=”Sektion 1″ _builder_version=”4.27.2″ _module_preset=”default” custom_padding=”16px||16px||true|false” collapsed=”on” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_row admin_label=”Related terms” _builder_version=”4.27.2″ _module_preset=”default” width_tablet=”100%” width_phone=”100%” width_last_edited=”on|tablet” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”4_4″ _builder_version=”4.27.2″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_heading title=”What is accessibility?” _builder_version=”4.27.2″ _module_preset=”default” title_level=”h2″ custom_margin=”||16px|||” locked=”off” global_colors_info=”{}” theme_builder_area=”post_content”][\/et_pb_heading][et_pb_text _builder_version=”4.27.2″ _module_preset=”default” locked=”off” global_colors_info=”{}” theme_builder_area=”post_content”]<\/p>\n
Accessibility is essentially about making (digital) content accessible to all people\u2014regardless of whether or not they have physical and\/or mental disabilities. In short, the aim is to design and develop a website, for example, in such a way that people with blindness can also understand the content. <\/p>\n
The aim of this article is to provide a basic explanation of the topic and show what options designers and developers have for making digital products accessible.<\/p>\n
[\/et_pb_text][et_pb_text _builder_version=”4.27.2″ _module_preset=”default” locked=”off” global_colors_info=”{}” theme_builder_area=”post_content”]<\/p>\n
\nAccessible design takes into account users who may have a disability.<\/p>\n<\/blockquote>\n
[\/et_pb_text][et_pb_text _builder_version=”4.27.2″ _module_preset=”default” text_text_color=”#343D4F” text_font_size=”15px” custom_margin=”-10px||||false|false” custom_padding=”0px||||false|false” locked=”off” global_colors_info=”{}” theme_builder_area=”post_content”]<\/p>\n
Source: The A11Y Collective<\/span><\/a><\/p>\n
[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ admin_label=”Sektion 2″ _builder_version=”4.27.2″ _module_preset=”default” custom_padding=”16px||16px||true|false” collapsed=”on” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_row admin_label=”Related terms” _builder_version=”4.27.2″ _module_preset=”default” width_tablet=”100%” width_phone=”100%” width_last_edited=”on|tablet” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”4_4″ _builder_version=”4.27.2″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_heading title=”Why is accessible design so important?” _builder_version=”4.27.2″ _module_preset=”default” title_level=”h2″ global_colors_info=”{}” theme_builder_area=”post_content”][\/et_pb_heading][et_pb_text _builder_version=”4.27.2″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”]<\/p>\n
According to a WHO report, an estimated 1.3 billion people are permanently affected by disabilities (source: WHO<\/a>). This means that, on average, one in six people is affected by limitations in their daily lives. In the EU, the figure is even higher. According to a report, around 27% of EU citizens (i.e. one in four people) will be living with some form of disability in 2022 (source: EU<\/a>). <\/p>\n
The type and severity of the disabilities are just as diverse as humanity itself.<\/p>\n
[\/et_pb_text][et_pb_image src=”https:\/\/www.pretot-design.de\/ux\/wp-content\/uploads\/2025\/02\/Graphic-EU-citizens-with-disabilities.png” _builder_version=”4.27.4″ _module_preset=”081d036f-a2d7-484f-93c9-dad3e4395579″ theme_builder_area=”post_content” alt=”Info graphic on the number of EU citizens with disabilities (101 million in 2022).” title_text=”Graphic EU citizens with disabilities” show_in_lightbox=”on” width=”80%” hover_enabled=”0″ sticky_enabled=”0″][\/et_pb_image][et_pb_text _builder_version=”4.27.2″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”]<\/p>\n
When asked ‘What is a disability?’, most answers refer directly to the supposedly ‘classic’ disabilities, such as blindness, deafness or lack of mobility. However, the topic needs to be considered in a much more granular way, because in addition to different forms of disability, there are numerous other forms that people have to cope with. For example, cognitive limitations in the perception of information can quickly become an insurmountable barrier. Even people who normally have no limitations can have temporary disabilities as a result of an accident or an operation, for example. <\/p>\n
These figures and examples clearly show that accessible design is not just aimed at individuals, but affects a very broad section of society.<\/p>\n
[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ admin_label=”Sektion Nutzungsqualit\u00e4t” _builder_version=”4.27.2″ _module_preset=”default” custom_padding=”16px||16px||true|false” collapsed=”on” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_row _builder_version=”4.27.2″ _module_preset=”default” width_tablet=”100%” width_phone=”100%” width_last_edited=”on|tablet” collapsed=”off” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”4_4″ _builder_version=”4.27.2″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_heading title=”What types of impairment are there?” _builder_version=”4.27.2″ _module_preset=”default” title_level=”h2″ global_colors_info=”{}” theme_builder_area=”post_content”][\/et_pb_heading][et_pb_image src=”https:\/\/www.pretot-design.de\/ux\/wp-content\/uploads\/2024\/10\/Forms-of-Disabilities.png” alt=”Graphic uses symbols to show different forms of disabilities and impairments.” title_text=”Forms of disabilities” _builder_version=”4.27.2″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][\/et_pb_image][et_pb_text _builder_version=”4.27.2″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”]<\/p>\n
Before I go into detail about how a digital product can be designed and developed to be accessible, it is worth taking a look at the different forms of disabilities. This is because it is important to understand how a disability affects people’s everyday lives in order to be able to develop targeted measures for accessibility. <\/p>\n
[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.27.2″ _module_preset=”default” width_tablet=”100%” width_phone=”100%” width_last_edited=”on|tablet” collapsed=”on” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”4_4″ _builder_version=”4.27.2″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_heading title=”Permanent and temporary disabilities” _builder_version=”4.27.2″ _module_preset=”default” title_level=”h3″ title_text_color=”#931DC1″ custom_margin=”||4px||false|false” global_colors_info=”{}” theme_builder_area=”post_content”][\/et_pb_heading][et_pb_text _builder_version=”4.27.2″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”]<\/p>\n
A disability can either exist from birth, develop gradually (e.g. as a person gets older) or it can only affect a person for a limited period of time. For example, a fracture of the writing hand can affect people in various ways in their everyday lives. With regard to digital products, such a disability can temporarily prevent users from using a writing program as ‘usual’. <\/p>\n
[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.27.2″ _module_preset=”default” width_tablet=”100%” width_phone=”100%” width_last_edited=”on|tablet” custom_padding=”||0px|||” collapsed=”on” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”4_4″ _builder_version=”4.27.2″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_heading title=”Blindness” _builder_version=”4.27.2″ _module_preset=”default” title_level=”h3″ title_text_color=”#931DC1″ custom_margin=”||4px||false|false” global_colors_info=”{}” theme_builder_area=”post_content”][\/et_pb_heading][et_pb_text _builder_version=”4.27.2″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”]<\/p>\n
In the most severe form of blindness, people with this disability cannot see what other people can see with their eyes.<\/p>\n
[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”1_2,1_2″ _builder_version=”4.27.2″ _module_preset=”default” width_tablet=”100%” width_phone=”100%” width_last_edited=”on|tablet” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”1_2″ _builder_version=”4.27.2″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.27.2″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”]<\/p>\n
However, there are also numerous gradations or other forms of partial blindness that can severely affect people in their everyday lives. Glaucoma, for example, often impairs people’s field of vision. This is also a hindrance in a digital context, for example when related content extends across large areas of the screen. It is then difficult for users with glaucoma to recognize the content. <\/p>\n
[\/et_pb_text][\/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.27.2″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_image src=”https:\/\/www.pretot-design.de\/ux\/wp-content\/uploads\/2024\/11\/Sicht-mit-Glaukom-1024×678.jpg” alt=”Simulation of a restricted viewing area with a view of a website.” title_text=”Vision with glaucoma” show_in_lightbox=”on” _builder_version=”4.27.4″ _module_preset=”081d036f-a2d7-484f-93c9-dad3e4395579″ global_colors_info=”{}” theme_builder_area=”post_content”][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”1_2,1_2″ _builder_version=”4.27.2″ _module_preset=”default” width_tablet=”100%” width_phone=”100%” width_last_edited=”on|desktop” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”1_2″ _builder_version=”4.27.2″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.27.2″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”]<\/p>\n
Another common visual impairment is color blindness. People have difficulty recognizing certain colors. The most common form of color blindness is not being able to tell the difference between green, red and shades of gray. <\/p>\n
[\/et_pb_text][\/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.27.2″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_image src=”https:\/\/www.pretot-design.de\/ux\/wp-content\/uploads\/2025\/02\/Graphic-View-with-Red-green-blindness.png” alt=”Visualisation of a view of a red and a green button without visual impairment.” title_text=”Graphic View without Red-green blindness” show_in_lightbox=”on” _builder_version=”4.27.4″ _module_preset=”081d036f-a2d7-484f-93c9-dad3e4395579″ hover_enabled=”0″ hover_image_src=”https:\/\/www.pretot-design.de\/ux\/wp-content\/uploads\/2025\/02\/Graphic-View-without-Red-green-blindness.png” global_colors_info=”{}” theme_builder_area=”post_content” sticky_enabled=”0″][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.27.2″ _module_preset=”default” width_tablet=”100%” width_phone=”100%” width_last_edited=”on|tablet” collapsed=”on” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”4_4″ _builder_version=”4.27.2″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_heading title=”Deafness and muteness” _builder_version=”4.27.2″ _module_preset=”default” title_level=”h3″ title_text_color=”#931DC1″ custom_margin=”||4px||false|false” global_colors_info=”{}” theme_builder_area=”post_content”][\/et_pb_heading][et_pb_text _builder_version=”4.27.2″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”]<\/p>\n
Satisfaction describes how pleasant and positive the use of<\/strong> a system is for users. It is influenced by both effectiveness and efficiency: if a system is not effective or efficient, this can reduce satisfaction. <\/p>\n
At the same time, a high level of satisfaction can improve effectiveness and efficiency<\/strong>, as satisfied users are more motivated to complete tasks successfully. Purchase incentives, such as discounts or extras, for example, can have a positive influence on user satisfaction. <\/p>\n
User surveys are an effective way of measuring satisfaction. We often see these surveys after the introduction of new functions in an app, for example. <\/p>\n
[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.27.2″ _module_preset=”default” width_tablet=”100%” width_phone=”100%” width_last_edited=”on|tablet” collapsed=”on” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”4_4″ _builder_version=”4.27.2″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_heading title=”Physical disabilities” _builder_version=”4.27.2″ _module_preset=”default” title_level=”h3″ title_text_color=”#931DC1″ custom_margin=”||4px||false|false” global_colors_info=”{}” theme_builder_area=”post_content”][\/et_pb_heading][et_pb_text _builder_version=”4.27.2″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”]<\/p>\n
As already mentioned in the section on temporary disabilities, a physical limitation may mean that certain digital products cannot be used in the same way as people without disabilities.<\/p>\n
This can affect text input, as in the example above. However, people may also be unable to use a computer mouse and have to rely on keyboard navigation or other assistive technologies. <\/p>\n
Digital products should therefore always take users with physical disabilities into account and offer alternative forms of navigation, for example.<\/span><\/p>\n
[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.27.2″ _module_preset=”default” width_tablet=”100%” width_phone=”100%” width_last_edited=”on|tablet” collapsed=”on” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”4_4″ _builder_version=”4.27.2″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_heading title=”Cognitive disabilities” _builder_version=”4.27.2″ _module_preset=”default” title_level=”h3″ title_text_color=”#931DC1″ custom_margin=”||4px||false|false” global_colors_info=”{}” theme_builder_area=”post_content”][\/et_pb_heading][et_pb_text _builder_version=”4.27.2″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”]<\/p>\n
There are many types of cognitive disabilities. Some of them affect the way users use and\/or understand digital products. <\/p>\n
People with autism, for example, tend to be easily distracted. They can also be blocked by errors that occur during navigation, for example. <\/p>\n
Users with attention deficit\/hyperactivity disorder (ADHD) can also be severely affected by digital content. This is because they often lack the ability to concentrate in order to read long texts attentively. <\/p>\n
And so there are many other forms of cognitive disability that need to be taken into account during design and development. One common approach is to provide content in plain language. This helps those affected not to be excluded from content. <\/p>\n
[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.27.2″ _module_preset=”default” width_tablet=”100%” width_phone=”100%” width_last_edited=”on|tablet” collapsed=”on” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”4_4″ _builder_version=”4.27.2″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_heading title=”Environmental and other restrictions” _builder_version=”4.27.2″ _module_preset=”default” title_level=”h3″ title_text_color=”#931DC1″ custom_margin=”||4px||false|false” global_colors_info=”{}” theme_builder_area=”post_content”][\/et_pb_heading][et_pb_text _builder_version=”4.27.2″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”]<\/p>\n
Have you ever looked at a website while lying on the beach in the most beautiful sunshine? Then you probably know the problem: if the contrast of the website is not right, you can only read the content poorly or not at all. <\/p>\n
And so environmental influences can lead to a barrier for every user, even if there is actually no physical or cognitive disability.<\/p>\n
Another example of a restriction that can affect anyone is ‘surfing’ on a mobile phone on the bus. If texts are too small, it becomes difficult to read content in bumpy road conditions. It is therefore extremely important to take such situations into account when designing digital products. Of course, this applies in particular to products that are mainly used by users on the move. <\/p>\n
<\/p>\n
[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ admin_label=”Sektion Heuristiken” _builder_version=”4.27.2″ _module_preset=”default” custom_padding=”16px||16px||true|false” collapsed=”on” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_row _builder_version=”4.27.2″ _module_preset=”default” width_tablet=”100%” width_phone=”100%” width_last_edited=”on|phone” collapsed=”off” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”4_4″ _builder_version=”4.27.2″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_heading title=”How can digital content be made accessible?” _builder_version=”4.27.2″ _module_preset=”default” title_level=”h2″ global_colors_info=”{}” theme_builder_area=”post_content”][\/et_pb_heading][et_pb_image src=”https:\/\/www.pretot-design.de\/ux\/wp-content\/uploads\/2024\/11\/Barrierefreiheit-erzielen.png” alt=”The graphic uses symbols to show several options for making digital content accessible.” title_text=”Options for achieving accessibility” _builder_version=”4.27.2″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][\/et_pb_image][et_pb_text _builder_version=”4.27.2″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”]<\/p>\n
How content can be designed to be accessible and by what means depends in part on the disability of the user. In principle, however, designers and developers should make it possible for everyone to access their content. <\/p>\n
[\/et_pb_text][et_pb_text _builder_version=”4.27.2″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”]<\/p>\n
\nThe strength of the Internet lies in its universality. Access for everyone, regardless of disability, is a key aspect. <\/p>\n<\/blockquote>\n
[\/et_pb_text][et_pb_text _builder_version=”4.27.2″ _module_preset=”default” text_text_color=”#343D4F” text_font_size=”15px” custom_margin=”-10px||||false|false” custom_padding=”0px||||false|false” locked=”off” global_colors_info=”{}” theme_builder_area=”post_content”]Source: Tim Berners-Lee<\/span><\/a>W3C Director and inventor of the World Wide Web.[\/et_pb_text][et_pb_text _builder_version=”4.27.2″ _module_preset=”default” locked=”off” global_colors_info=”{}” theme_builder_area=”post_content”]In the following, I will go into the most important, basic options with which accessible design is possible. There are also many other options, such as the use of assistive technologies. However, I will not cover these in this article.[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.27.2″ _module_preset=”default” width_tablet=”100%” width_phone=”100%” width_last_edited=”on|desktop” locked=”off” collapsed=”on” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”4_4″ _builder_version=”4.27.2″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_heading title=”Colorfulness” _builder_version=”4.27.2″ _module_preset=”default” title_level=”h3″ title_text_color=”#931DC1″ custom_margin=”||4px||false|false” global_colors_info=”{}” theme_builder_area=”post_content”][\/et_pb_heading][et_pb_text _builder_version=”4.27.2″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”]<\/p>\n
Color is important to make things ‘beautiful’ or to indicate special content. The problem is that not everyone can see colors in the same way. <\/p>\n
<\/p>\n
[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.27.2″ _module_preset=”default” width_tablet=”100%” width_phone=”100%” width_last_edited=”on|desktop” custom_padding=”0px|||||” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”3_5″ _builder_version=”4.27.2″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.27.2″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”]<\/p>\n
Color meaning<\/h4>\n
People with red-green visual impairment (deuteranopia) can hardly distinguish between red and green tones, they often appear gray. Content should therefore never be communicated using colors alone. Error messages should contain a symbol, such as an exclamation mark, in addition to the red color. <\/p>\n
Text links must also be clearly recognizable for all users. A purely colored highlighting is not enough; according to usability standards, links should ideally be underlined in order to remain generally understandable.[\/et_pb_text][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.27.2″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_image src=”https:\/\/www.pretot-design.de\/ux\/wp-content\/uploads\/2025\/02\/WCAG-compliant-error-messages.png” alt=”Display of an online form with a WCAG-compliant error message.” title_text=”WCAG-compliant error messages” show_in_lightbox=”on” _builder_version=”4.27.4″ _module_preset=”081d036f-a2d7-484f-93c9-dad3e4395579″ hover_enabled=”0″ global_colors_info=”{}” theme_builder_area=”post_content” sticky_enabled=”0″][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.27.2″ _module_preset=”default” width_tablet=”100%” width_phone=”100%” width_last_edited=”on|desktop” custom_padding=”0px|||||” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”3_5″ _builder_version=”4.27.2″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.27.2″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”]<\/p>\n
Color contrast<\/h4>\n
High contrast is essential for people with visual impairments. Text in light pastel shades on a white background may look ‘beautiful’, but it is difficult to read. <\/p>\n
Normal texts<\/strong> should have a contrast ratio of<\/strong> at least 4.5:1<\/strong>; large texts from 24 pixels only require 3:1 for WCAG Level AA.<\/p>\n
Tools such as the WCAG Color Contrast Checker<\/a> make it easy to test contrasts, with the tools also indicating the WCAG level.<\/p>\n
[\/et_pb_text][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.27.2″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_image src=”https:\/\/www.pretot-design.de\/ux\/wp-content\/uploads\/2024\/10\/WCAG-Kontrast-Checker-e1730317345691.jpg” alt=”Screenshot of an online tool for evaluating color contrast.” title_text=”WCAG contrast checker” show_in_lightbox=”on” _builder_version=”4.27.2″ _module_preset=”081d036f-a2d7-484f-93c9-dad3e4395579″ global_colors_info=”{}” theme_builder_area=”post_content”][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.27.2″ _module_preset=”default” width_tablet=”100%” width_phone=”100%” width_last_edited=”on|desktop” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”3_5″ _builder_version=”4.27.2″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_heading title=”Keyboard navigation” _builder_version=”4.27.2″ _module_preset=”default” title_level=”h3″ title_text_color=”#931DC1″ custom_margin=”||4px||false|false” global_colors_info=”{}” theme_builder_area=”post_content”][\/et_pb_heading][et_pb_text _builder_version=”4.27.2″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”]<\/p>\n
People with physical disabilities often only navigate through digital content using a keyboard. A digital product, such as a website, must therefore enable simple keyboard navigation. The WCAG criteria recommend supporting arrow or tab keys as standard. Users should also be able to understand where they are currently located through visual feedback. <\/p>\n
Visual feedback is typically a visually clear focus state, such as a frame around the current text link.<\/p>\n
[\/et_pb_text][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.27.2″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_image src=”https:\/\/www.pretot-design.de\/ux\/wp-content\/uploads\/2025\/02\/WCAG-compliant-focus-status.png” alt=”Display of WCAG-compliant button and text link states.” title_text=”WCAG-compliant focus status” show_in_lightbox=”on” _builder_version=”4.27.4″ _module_preset=”081d036f-a2d7-484f-93c9-dad3e4395579″ hover_enabled=”0″ global_colors_info=”{}” theme_builder_area=”post_content” sticky_enabled=”0″][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.27.2″ _module_preset=”default” width_tablet=”100%” width_phone=”100%” width_last_edited=”on|desktop” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”3_5″ _builder_version=”4.27.2″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_heading title=”Keeping things together that belong together” _builder_version=”4.27.2″ _module_preset=”default” title_level=”h3″ title_text_color=”#931DC1″ custom_margin=”||4px||false|false” global_colors_info=”{}” theme_builder_area=”post_content”][\/et_pb_heading][et_pb_text _builder_version=”4.27.2″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”]<\/p>\n
If users suffer from glaucoma, for example, they can only see part of the screen. It is therefore important to keep things together that belong together. <\/p>\n
For example, a form that is particularly extensive becomes a challenge for these users. Therefore, extensive forms should either be divided into several individual form steps or at least into sections. <\/p>\n
[\/et_pb_text][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.27.2″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_image src=”https:\/\/www.pretot-design.de\/ux\/wp-content\/uploads\/2025\/02\/Vision-with-glaucoma-on-form-300×225.jpg” alt=”For comparison: restricted field of vision (glaucoma) on a short and a long form.” title_text=”Vision with glaucoma on form” show_in_lightbox=”on” _builder_version=”4.27.4″ _module_preset=”081d036f-a2d7-484f-93c9-dad3e4395579″ hover_enabled=”0″ global_colors_info=”{}” theme_builder_area=”post_content” sticky_enabled=”0″][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.27.2″ _module_preset=”default” width_tablet=”100%” width_phone=”100%” width_last_edited=”on|desktop” custom_margin=”-4px||||false|false” custom_padding=”0px||||false|false” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”4_4″ _builder_version=”4.27.2″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.27.2″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”]<\/p>\n
However, even less complex elements in a digital product can affect users with glaucoma. For example, if a search bar is very wide and the button to trigger the search is at the end, this can lead to both not being in the user’s focus area at the same time. <\/p>\n
[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.27.2″ _module_preset=”default” width_tablet=”100%” width_phone=”100%” width_last_edited=”on|desktop” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”3_5″ _builder_version=”4.27.2″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_heading title=”Provide alternative text” _builder_version=”4.27.2″ _module_preset=”default” title_level=”h3″ title_text_color=”#931DC1″ custom_margin=”||4px||false|false” global_colors_info=”{}” theme_builder_area=”post_content”][\/et_pb_heading][et_pb_text _builder_version=”4.27.2″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”]<\/p>\n
Images and infographics are often visually appealing, but inaccessible for people with blindness or impaired vision. Visual content should therefore also be available in text form: <\/p>\n
\n
- Images should always be described with an alternative text (ALT text in HTML).<\/li>\n
- Buttons with icons should have ARIA labels so that screen reader programs can read out ‘Button: Save’, for example.<\/li>\n
- Videos should always have subtitles. Sound descriptions should also be included, such as ‘The doorbell rings’. <\/li>\n
- For audio recordings, a transcription is useful, which is provided under the audio track or on a separate page.<\/li>\n<\/ul>\n
[\/et_pb_text][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.27.2″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_image src=”https:\/\/www.pretot-design.de\/ux\/wp-content\/uploads\/2024\/11\/Mint-farbene-Kuh-im-Mondkrater.jpg” alt=”Picture of a surrealistic cow in a moon crater.” title_text=”Mint-colored cow in the moon crater” show_in_lightbox=”on” _builder_version=”4.27.2″ _module_preset=”081d036f-a2d7-484f-93c9-dad3e4395579″ global_colors_info=”{}” theme_builder_area=”post_content”][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”3_5,2_5″ _builder_version=”4.27.2″ _module_preset=”default” width_tablet=”100%” width_phone=”100%” width_last_edited=”on|desktop” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”3_5″ _builder_version=”4.27.2″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_heading title=”Consider reading level” _builder_version=”4.27.2″ _module_preset=”default” title_level=”h3″ title_text_color=”#931DC1″ custom_margin=”||4px||false|false” global_colors_info=”{}” theme_builder_area=”post_content”][\/et_pb_heading][et_pb_text _builder_version=”4.27.2″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”]<\/p>\n
Texts should be written so simply that they are understandable for the majority; ideally at the reading level of 12-year-olds. While this approach does not apply to all texts – scientific papers can be more complex\u2014copywriters should always bear in mind that readers can also be distracted. Noise or other environmental factors can influence reading comprehension. <\/p>\n
A simple short summary is helpful for longer texts. A useful tool for checking text complexity is the Hemingway app<\/a>, which divides texts into different levels of difficulty. <\/p>\n
[\/et_pb_text][\/et_pb_column][et_pb_column type=”2_5″ _builder_version=”4.27.2″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_image src=”https:\/\/www.pretot-design.de\/ux\/wp-content\/uploads\/2024\/11\/Mann-mit-Kind-Abgelenkt-im-Homneoffice.jpg” alt=”Small child sits on the shoulder of the father, who works from home.” title_text=”Man with child\u2014distracted in the home office” show_in_lightbox=”on” _builder_version=”4.27.2″ _module_preset=”081d036f-a2d7-484f-93c9-dad3e4395579″ global_colors_info=”{}” theme_builder_area=”post_content”][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.27.2″ _module_preset=”default” width_tablet=”100%” width_phone=”100%” width_last_edited=”on|desktop” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”4_4″ _builder_version=”4.27.2″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_heading title=”Small adjusting screws with a big effect” _builder_version=”4.27.2″ _module_preset=”default” title_level=”h3″ title_text_color=”#931DC1″ custom_margin=”||4px||false|false” global_colors_info=”{}” theme_builder_area=”post_content”][\/et_pb_heading][et_pb_text _builder_version=”4.27.2″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”]<\/p>\n
Barriers in digital products can be avoided<\/strong> or at least reduced with a few ‘tricks’<\/strong>. If, for example, the color contrast of 4.5:1 is taken into account when designing a website or keyboard navigation is enabled, the product will be accessible to more people. <\/p>\n
And best of all, if the WCAG criteria<\/strong> are taken into account from the outset<\/strong>, the effort required to make a digital product accessible is limited.<\/p>\n
[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ _builder_version=”4.27.2″ _module_preset=”default” custom_padding=”16px||16px||true|false” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_row _builder_version=”4.27.2″ _module_preset=”default” width_tablet=”100%” width_phone=”100%” width_last_edited=”on|desktop” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”4_4″ _builder_version=”4.27.2″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_heading title=”Important guidelines for accessibility in the digital space” _builder_version=”4.27.2″ _module_preset=”default” title_level=”h2″ global_colors_info=”{}” theme_builder_area=”post_content”][\/et_pb_heading][et_pb_text _builder_version=”4.27.2″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”]<\/p>\n
As described in the previous section, there are different ways to design accessible digital products. However, to ensure that digital products can be developed in accordance with as uniform a standard<\/strong> as possible, there are essentially three reference guidelines in Europe: <\/p>\n
[\/et_pb_text][et_pb_text _builder_version=”4.27.2″ _module_preset=”default” custom_padding=”|||24px|false|false” global_colors_info=”{}” theme_builder_area=”post_content”]<\/p>\n
\n
- Web Content Accessibility Guidelines (WCAG) of the W3C (international standard)<\/li>\n
- EN 301 549 (European standard for digital accessibility)<\/li>\n
- BITV 2.0 (Barrier-free Information Technology Ordinance 2.0)<\/li>\n
- Supplement: Accessibility Reinforcement Act (BFSG)<\/li>\n<\/ol>\n
<\/p>\n
[\/et_pb_text][et_pb_accordion open_toggle_text_color=”#343D4F” open_toggle_background_color=”RGBA(255,255,255,0)” closed_toggle_background_color=”#E3FCEC” toggle_icon=”||fa||900″ icon_color=”#343D4F” module_class=”pa-accordion” _builder_version=”4.27.2″ _module_preset=”default” toggle_text_color=”#343D4F” toggle_font_size=”17px” closed_toggle_font_size=”17px” background_color=”RGBA(255,255,255,0)” border_width_all=”2px” border_color_all=”#E3FCEC” locked=”off” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_accordion_item title=”Web Content Accessibility Guidelines (WCAG) of the W3C” open=”on” _builder_version=”4.27.2″ _module_preset=”default” background_color=”#e3fcec” background_enable_color=”on” global_colors_info=”{}” theme_builder_area=”post_content”]<\/p>\n
The WCAG guidelines<\/strong> were developed by the W3C and represent an international guideline for the accessibility of web content. The current recommended version is version 2.2. They contain principles, guidelines and success criteria in three levels: A, AA and AAA. <\/p>\n
The focus is on all types of web content, without specific consideration of legal requirements. The WCAG guidelines are widely used and recognized worldwide. They also serve as the basis for many national accessibility laws (e.g. in Europe and the USA). <\/p>\n
Link to the website: https:\/\/www.w3.org\/TR\/WCAG22\/<\/a><\/p>\n
[\/et_pb_accordion_item][et_pb_accordion_item title=”EN 301 549 (European standard for digital accessibility)” _builder_version=”4.27.2″ _module_preset=”default” background_color=”#e3fcec” background_enable_color=”on” global_colors_info=”{}” theme_builder_area=”post_content” open=”off”]EN 301 549<\/strong> is a European standard that defines the accessibility requirements for ICT products (information and communication technologies) and services, such as websites, software or mobile applications.<\/p>\n
The guideline is based on the WCAG 2.1 criteria and stipulates compliance with Level A and AA. It also includes additional specific requirements for hardware, documents and software. <\/p>\n
The focus is on the regulation of accessibility for public institutions in the EU and ensures that they provide accessible digital content and technologies. EN 301 549 is legally binding in the EU and forms the basis of the EU Website Directive<\/strong> (EU 2016\/2102). <\/p>\n