Accessibility on the Internet/on the PC – a personal report

Motivation

The motivation for this blog post is both my last project and my current project, as I am a frontend developer here and could therefore experience some design decisions first-hand and influence them.

To provide some background, I first want to say something about my visual impairment. Due to a genetic defect (albinism), my eyes are damaged in many ways, resulting in severe visual impairment. These include sensitivity to light and reduced visual acuity.

What does this mean when I use a PC?

In general, each form of visual impairment has different problems when using PCs, but there are a few general challenges that many visual impairments share.

Contrasts:

Using the right colours is one of the most important things when designing applications, as these can ensure that the application can be used well, or that they are completely unusable. For example, if the background colour has a saturation of more than 40 per cent, it may be difficult to decipher the text reasonably.

In this example, a blackened blue tone (blue with a high black content) was used with a background colour with ascending saturation, starting at 0 per cent in 20-per-cent steps up to 80 per cent.

Of course, it is also difficult for people without visual impairments to separate the text from the background at some point, but for me, for example, this starts to become problematic when the background saturation is 20 per cent.

Zoom or no zoom:

Fortunately, most websites have now been adapted to be built responsively and it is now possible to use the website in different resolutions with consistent quality. However, there are still applications today that are set at one resolution, which in turn leads to the problem that some websites are difficult to use here, as well. My default browser scaling is between 140 and 160 per cent. This makes some pages look quite odd and difficult to use. Desktop applications such as games can be similarly problematic, as it is still quite rare today to be able to scale and design the user interface to suit one’s own requirements.

Colour gradients:

Colour gradients can look very beautiful, but they should be treated with care. A new frontend design system, which consisted of a dark blue-green background (colour gradient), was introduced at some point in the past project. The buttons also had a blue-green gradient background and dark blue text. Accordingly, it was sometimes very difficult to read the texts, as the colour gradient made it very difficult to focus on the text.

Where is the problem?

Unfortunately, the above pain points usually go beyond ‘that is annoying’ or ‘I cannot use that’. Using applications with the problems described above can unfortunately have more or less severe consequences depending on the visual impairment. For example, in my case, the use of such applications over a longer period of time leads to severe headaches, which can then also develop into a migraine. For this reason, I now try to pay more attention to avoiding such design decisions in the design of the frontend in current projects wherever possible.

What can help?

Fortunately, there are some assistive devices for people with disabilities as technology continues to evolve. It would go beyond the scope of this post, so I will only discuss technical aids for people with visual impairments here.

For example, Apple operating systems contain a feature where you can increase the magnification of the entire system, which is very useful in my opinion. This works together with the mouse wheel and feels very natural. The zoom is decoupled from application-specific zooms such as the browser zoom, which makes the pixel-precise positioning of frontend components very convenient. The Windows magnifier for displays also offers a similar function. However, this is only adjustable in fixed steps and requires a key combination or click to change the magnification level.

In addition, it has been possible to select different design themes to change the contrast, which can also help people with a red-green weakness, for example, for some time now.

Standards and guidelines:

As you are probably aware, there have been some standards and guidelines in place for a long time, some of which even apply at international level, to improve accessibility of web applications.

The list includes the Web Content Accessibility Guidelines (WCAG) at international level, at EU level the EU Directive 2102 and in Germany the Accessible Information Technology Ordinance (Barrierefreie Informationstechnik-Verordnung, BITV). These standards and guidelines describe, in different variations, requirements that an accessible website must fulfil. However, in Germany, these currently only apply to the websites for federal and local authorities. Nevertheless, these websites are a good example of how the issue of accessibility can become quite complex.

Websites for federal/local authorities now function more or less reasonably in terms of accessibility, but then suffer again in the overall design, as they seem rather forced and cannot be used logically. Here is an example: The citizens’ registration office website for the city of Dortmund.

Conclusion

The points I have described in this post just scratch the surface of the issue of accessibility. Of course, there is a whole range of different disabilities that can have a completely different impact on the use of PC or web applications.

I do not mean for people to go overboard with accessibility. I only want to draw attention to the fact that there are things that are easily avoidable in the design of a user interface and can have a big impact.

In my opinion, however, it would be ideal if the current user interface frameworks were further developed in terms of accessibility, so that in future accessibility becomes a fundamental component of frontend development and does not remain an additional effort that has to be made up for at the end of the development.

Would you like to learn more about exciting topics from the world of adesso? Then check out our latest blog posts.