This is the question you should ask yourself as a business. Your website should be able to be used by any person without any problems. To make this statement even more precise: Without outside help, the user interface should be able to be used by every person without restrictions. The term accessibility is also often used. If a website is not accessible, this has devastating consequences, because people with limitations cannot use the user interface fully or not at all. Therefore, it is important to meet at least the minimum basic requirements in order not to lose these users. The W3C organization takes care of international standards in the field of web accessibility. Among them is the topic WCAG, which addresses the issues of perceptibility (content must also be aligned for blind people), usability (interface must also be aligned with alternative control means), comprehensibility (the entire content must be understandable, e.g. error messages in forms) and robustness (content must also be accessible with alternative technologies).

Optimizations

Accessibility can be improved by simple means, taking into account the international standards. Better accessibility is also practical for people without disabilities. This is because user interfaces with higher accessibility standards usually also require better user guidance. Google's rating also puts an emphasis on user guidance. With a good accessibility you can kill two birds with one stone. In the further sections you will find suggestions for optimization that we can give you as a web agency.

Operability

One of the most important basic requirements for effortless use of a web solution is, that people with an impairment can use the website themselves or with assistive devices/functions. For example, people with a visual impairment use screen readers. On the other hand, people with auditory impairments can grasp the page content, but reach their limits with videos if they do not have transcription. Therefore, it is important that these basics are already taken into account during development. The input focus plays an important role here, as it determines the order in which the layout is "read aloud". Below is an example of how the "Focus Order" works, provided the order is not changed in the programming.

Semantic HTML

The basis for more accessibility is also due to the HTML code. The programming language is responsible for the basic framework of the web application. Therefore, it is important, already at the beginning, to build the code semantically correct. Thus, the intended code building blocks should be used for the originally intended use. Mostly there are other solutions where more tinkering is done. However, in order to ensure accessibility and to allow assistant programs to work with the page without any problems, semantically correctly structured HTML code is the be-all and end-all.

Correct use of hierarchical heading tags

Part of the semantic HTML are the hierarchical <h1> to <h6> heading tags. They arrange the structure of the web page. <h1> is used as the most powerful heading and is thus the lowest hierarchy. For screen readers, headings are a navigational tool that allows them to orient themselves and output the appropriate content. Pimcore offers you a perfect solution here: you can choose between different heading sizes in a module, of course this has to be programmed beforehand.

Navigation

To make it as easy as possible for everyone to find their way around the website, the structure of the navigation is crucial. With simple, clear structure and understandable terms, they have done a solid foundation. Avoid cluttering up the menu with unnecessary navigation points. To maintain habits, the positioning of the menu should not be reinvented. Also, the minimum size of an icon should not be less than 44px × 44px, otherwise it may cause clicking problems. Offer users several ways to get to a destination, for example, via navigation, clicks on the page and a search. This way, your user can choose the most appropriate path for them. Also, keep in mind people who only use the keyboard to navigate websites. It must be possible to access the menu via the keyboard at any time.

Another support can be provided by "breadcrumbs", which are usually placed in front of the largest heading at the beginning of the page. They show the path how to get to this page. For handicapped people, this is another way to find their way around the website.

Forms

In order to ensure that forms are also accessible, two important points must be observed here as well. Firstly, it is important that the form fields are correctly labeled. It is also imperative that a mandatory field is marked. If the content of the input field is incorrect or the form cannot be submitted, an explanatory error message is very important.

Image and video content

In order for people with disabilities to be able to perceive image or video content, the corresponding accessibility principles must also be implemented here. For both multi-media elements, an <alt>-tag is set as an alternative. The alternative text must contain a meaningful description of the image. In most cases, it is valuable to explain the context of the image. For videos, an additional (audio) transcription is necessary. Likewise, for videos, the controls must be retained.

Colors and contrasts

Color contrast is important for users with impaired vision. A high contrast makes it easier to perceive what is displayed. This optimization is also a support for healthy people. To make sure that your contrasts are sufficient, you can check your contrasts in the "Color Tool". It will show you whether the contrast is more ideal with white or black text. For symbols that use a traffic light system, it is important to add a short comment. For example, in a web store, a green dot lights up in the product description, and a comment such as "150 items in stock" should be added in order to emphasize the visual aspect. There are exceptions where the color contrast is not taken into account. For example, logos that are built in multiple accent colors of one hue. Under the following link from Material Design you can test how your color contrast behaves.

Interactions

People with impairments need to know what is happening on the website. They or their assistive device rely on feedback. For example, buttons should have the different states such as Default, Focus, Hover, Pressed/Active, Progress/Load, and Disabled.

Responsive Design

Responsive web solutions ensure that the programmed website is easily usable and readable on all devices, regardless of their display size. These accessibility optimizations bring added value for everyone, even for people without limitations. Viewing a Responsive website on a smartphone is much more pleasant than viewing a non-optimized website. It is not necessary to scroll and zoom through the whole page.

Certification

Among others, the Swiss organization "Access-for-all" promotes certifications of web solutions. A is the lowest standard and AAA the highest possible standard. These certification standards ensure that the user interface can also be used by people with disabilities without restrictions. For government or public institutions, WCAG AA certification is mandatory. As a company, however, certification or verification can also be obtained voluntarily. "Access-for-all" also offers consultations to explain the most important points in the area of accessibility for your website. From our own experience, we can tell you that the process is very time-consuming and costly. If you want to certify a web solution, keep this in mind already at the beginning of the project planning.

Conclusion

For people without disabilities, the issue of accessibility usually fades into the background because it does not affect them. For people with disabilities, however, this is an essential topic. Without the necessary optimizations, they cannot use the web solution to its full extent or at all. Therefore, it is elementary that these supports have been implemented accordingly. After all, everyone has the right to easy and barrier-free access to information, products and services. For UI/UX designers, the design of an accessible website poses further challenges, as some of the above-mentioned points have to be implemented specifically.

I also gained new insights during the research and writing of this blog. If you have any questions in the area of accessibility or are looking for a partner to certify your website, feel free to contact us.