4 easy steps to improve your website accessibility

Accessibility means freedom from barriers or better accessibility of products and services and plays a major role especially in the area of digital services. An important step towards a society in which ALL people can lead a self-determined life is the accessibility of information and products. It is not only people with disabilities who benefit from this. Barriers can affect everyone. Be it permanently due to a disability or old age, temporarily due to an injury or situationally. A look at the WCAG standard (Web Content Accessibility Guidelines) helps to make a product or service accessible.

On the occasion of the regulations of the Barrier-Free Strengthening Act, which will apply from mid-2025, I also took a close look at our website to check where we are barrier-free and where there is still room for improvement. The field of accessibility is very large. I would like to present some areas here that are easy to implement in practice and significantly improve the accessibility of a website, a software application and an app.

So, here we go. Let's take a look at the four areas I have chosen.

• Know how - choose colours, contrasts and fonts wisely
• A clear line of sight for the right overview
• Appropriate targets to avoid frustration
• The right preparation for assistive technologies

Do you need help with a design project?

At Cayas Software we love to provide some expertise with our experienced UI/UX designers.

Have a look at our design services

Know how - choose colours, contrasts and fonts wisely

Colours play an important role in life and communication. However, it is important to remember that not everyone perceives colours in the same way. People with colour blindness, for example, have difficulty distinguishing between certain colours. To ensure that information is communicated effectively, it is important to use additional text and/or symbols alongside colour information. By using symbols, e.g. a walking or standing doll next to a traffic light, people with colour deficiencies can also understand the status of the traffic light.

The graphic on the left shows how a person with unimpaired vision perceives a pedestrian traffic light. On the right, that of a person with red-green impairment. If the status of the traffic lights were not additionally supported by the walking and the standing male, it would hardly be possible for the person with red-green impairment to recognise which status the traffic lights are currently indicating.

As in road traffic, it is also important in the digital space that information that should be comprehensible to users is also accessible to all. Within a software application, for example, it is important that in the case of an error message within an input field, this error is made clear on several levels. A red border around the corresponding field alone is not enough. In addition to the color highlighting, an indication of the error in the form of text and symbols is also necessary. This is the only way to communicate the information clearly to everyone.

As can be seen from the graphic, to clarify the error message, the input field is provided with a red frame and a light red coloring and an error message is displayed in text form. In addition, the icon on the right supports this information. This information could not be understood by all users if these additional notes were dispensed with.

Another important point for the accessibility of text information is the color contrast between font color and background.. The lower the contrast between the two, the worse they stand out from each other. Even for people with unimpaired vision, such low-contrast representations are difficult to read. The combination of certain colors also carries the risk that the text is not easily readable. Let's look at the graphic examples. In the example of the white font on a black background, there is no difficulty in reading the text. The contrast between white and black is so great that the writing stands out clearly against the background. The second contrast example is different. The light grey lettering on the slightly darker grey background stands out only very faintly. The edges of the letters are difficult to see and the typeface is therefore hard to read. In the example of the red lettering on a green background, the problem is not that the colors do not stand out sufficiently from each other. This color combination is difficult for the eye to bear. It creates a kind of "flicker effect" that makes it very difficult for the eye to distinguish the text from the background and to read the information it contains.

It is also worth looking through accessibility glasses when choosing a font. Make sure that the letters are clearly different from each other. If the letters are too similar, they are difficult to distinguish and therefore hard to read. Let's take a look at the left-hand font example. Some of the characters are not clearly recognisable. Depending on the font, it can happen that the capital I, the small L and the digit 1 look the same.

A font with clearly distinguishable characters, as in the example font on the right, is therefore very important for the unambiguous transmission of information.If the font size is now set to the minimum specified by the WCAG, a barrier can be removed very quickly. Let us now turn to another important area.

A clear line of sight for the right overview

The focus state is crucial for accessibility, particularly for individuals using keyboards for interaction. Clear visual focus states enable users to understand their location within an interface and navigate websites and forms effectively. A visually distinctive focus state, such as a broad outline or color highlighting, helps users know whether they are navigating the website, interacting with a form field, or using a drop-down menu.

In the meantime, this representation of the focus status has become accepted by public authorities. The input field, menu item or button is clearly, colorfully and broadly outlined so that the focus state is clearly recognisable.

Appropriate targets to avoid frustration

There are various ways to navigate the web or interact with an application and software. In addition to operation with a mouse or pen, pure keyboard or finger operation is also possible. If a software application is operated only with the keyboard, the size and spacing of the interaction elements play a subordinate role. Since with keyboard operation each input field and each element is always focused one after the other and available for interaction, there is little danger of activating an element in the wrong place or selecting it incorrectly. When designing for mouse, pen or finger interaction, the size and spacing of the interaction elements are important. Small or tightly placed elements can be challenging for people with mobility impairments.

Here, too, it is worth taking a look at the WCAG guidelines. There, a minimum size for touch targets is defined. It ensures that the interactive elements are displayed and aligned sufficiently large and with sufficient distance to each other. This enables clear navigation without operating errors.

You like how we approach things?

This blog is supposed to give you a little insight into our everyday business when we take care of design tasks – no matter if we build an app in a full-service-environment or just provide our expertise via EaaS.

Have a look at our design services

The right preparation for assistive technologies

A website consists of texts, pictures, videos, audio files and much more. For people without disabilities or impairments, it is no problem to grasp this content. However, to make web content accessible to people who use assistive technologies, it is important to structure web pages with semantic HTML. For example, in order for a screen reader to access the information on a page, it must be able to recognise the structure of the page. This is only possible if the page is structured with semantic HTML. Semantic HTML forms the basis for accessibility on the Internet. It provides clear elements, headings and sections that can be interpreted by assistive technologies and allow effective navigation, for example, using the keyboard with the tab key.

To ensure that the content of the images can also be conveyed linguistically, it is necessary to enter alternative texts to the images and graphics in the HTML code. This can then be recorded and reproduced by the assistive technology. The clearer the description of an image or graphic, the better a visually impaired person can imagine what is in the image. This small addition in the code is a big step towards accessibility. Because in this way, even graphic information does not remain hidden.

In addition to the use of semantic HTML, this graphic also shows very nicely how color, shape and text work together to convey the information content of the icons on several levels. If semantic HTML is not sufficient in some places, it can be supplemented by ARIA (Accessible Rich Internet Applications) attributes to provide additional information and thus improve accessibility. ARIA attributes can be used to describe interactive elements, define roles and provide instructions for assistive technologies. Proper use of ARIA can greatly enhance the experience for users who rely on screen readers or other assistive technologies. It is important to note that ARIA is intended only as a supplement and should therefore be used sparingly. While semantically correct HTML elements have built-in keyboard accessibility, roles and states, when using ARIA attributes, one is responsible for replicating the appropriate browser behaviour in the script.

In order to check our own website for accessibility, I went in search of an online tool that could help me uncover barriers. In the process, I came across the accessibility test from Expert.de. This tool can be used to check a website for some important parameters. It checks whether

• the navigation on the page is accessible and consistent
• Aria has been implemented correctly
• form fields and buttons have meaningful labels and
• images have an alternative text.

Furthermore, the contrast ratio of background and foreground colors is checked, whether correct navigation within tables and lists is possible, whether videos used are provided with subtitles and whether a valid language has been specified so that screen readers can correctly reproduce the content of a website. To check, simply enter the URL of the page to be checked. After the check is complete, the result is displayed in a list.

When we checked our website, we found that the color contrast between the font color and the background color was insufficient in some places. Another point was an inconsistency within the navigation and in some places a quickly fixable inconsistency within the navigation structure. Since only certain accessibility problems are recognised by automated tests, it is recommended to carry out additional manual tests. So I did an additional manual test. I put the computer mouse aside and operated our website with the keyboard only. I noticed that the focus state is not fully present and that there is potential for improvement here.

When it comes to creating an accessible website, it quickly becomes clear that it is not just about designing a beautiful page. Suitable colors, fonts and sizes of elements should also contribute to making websites, applications and software programmes more accessible for all people. Low-barrier design is possible with just a few simple measures, as you can see. By adhering to visual rules and using structured HTML, the accessibility of a product is improved, which in turn leads to an increase in market share, as more people feel addressed and understood. So if accessibility is included in the conception of a product or website from the very beginning, a first big step can be made towards a really good user experience.

Now you have made it this far, so we assume you gained some interest into our work. That is totally fine. Be our guest and give us some feedback or discuss a project of yours. We will be happy to hear from you.

Let's talk