Designing for the visually Impaired

Guidelines such as the WCAG are an important and helpful tool for accessible design. But they often remain rather abstract. Oddly enough, the accessibility scene pays a lot of attention to aspects of blindness, but neglects the much larger group of the visually impaired.

In order to make the whole thing a little clearer, I would like to use a model to describe how the visually impaired use the Internet. This description is an example of a specific section of surfing behavior and is not exhaustive.

Article Content

Effects of visual impairments

In general, 3 effects of visual impairments can be distinguished:

Reduced visual acuity

The sharp recognition of objects is reduced. Complex objects such as letters in serif fonts are poorly recognized because the details cannot be distinguished. Imagine using the blur feature in photo editing and going a little overboard with it.

Weak contrast and color blindness

Objects with low contrast are difficult to recognize or distinguish from the background. Just imagine a severely over- or underexposed image.

Color ametropia means that colors such as red and green cannot be distinguished. This can be tested in any image processing if the image is displayed in grayscale. Color blindness is also common among the non-visually impaired.

Restrictions in the field of vision

The field of vision can be very small or only selectively sharp. This means that image objects can only be recognized in fragments. Therefore, objects are enlarged in order to see details better or reduced in order to be able to see the object as a whole.

Visually impaired at the computer

The visually impaired face special problems that are very different from the problems faced by the blind. Imagine you are on a certain website and need to click on something. No problem, you just click on it, you'll probably do that 1000 times a day.

If you are severely visually impaired, you now do the following: You look for the mouse cursor, this small white arrow that can hardly be seen behind the light background of the screen. Once you've found the cursor, find where you wanted to click again, because unlike a sighted person, you can't see both at the same time. If you're lucky, they remember where the cursor is and move it to the area to be clicked. If the click area is very small, it is often difficult to click on it precisely.

The whole thing is made more difficult when those affected use enlargement software. The greater the magnification, the more difficult it is for those affected to see where they are on the website. Imagine you had a map with all the towns and cities in North Rhine-Westphalia and had to find the town of Rheinbach, for example, without knowing exactly where it was actually located. I'm telling you now, it's near Bonn. You are now looking for Cologne because you know roughly where that loves and Cologne is larger than Bonn. Then look for Bonn and then for Rheinbach. This is what the visually impaired have to do when they look for very small elements on websites, they look for larger elements. Surfing on unfamiliar sites can become a strenuous and annoying puzzle.

The pitfalls of enlargement

We rarely realize what enlargement actually means. Let's assume that a website is the same size as the screen, say 17 inches, then increasing the size from 2 to 34 inches doubles the area. Magnified 10x, our site is 170 inches diagonally.

Together with the mouse cursor, they also move the enlarged image section, which means that as soon as the mouse is moved, for example to click on an element, the element to be clicked also moves. The visually impaired must master the feat of memorizing the position of two elements that they can almost never see at the same time. The drop-down menus are a real disaster, here the whole thing becomes mouse acrobatics.

In my experience, most visually impaired persons don't get used to keyboard controls because they've been socialized with the mouse. However, there is a similar problem with the keyboard. Let's say we want to click a link from the content area, then we have to use the keyboard to step over all possible elements and pay attention to where the keyboard focus is at the moment. At the same time, we have to remember the position of the link in the text that we wanted to click on. That sounds exhausting and it is.

Particular problems with touch screens

Now one might think that the problem has been solved with the touch screens. That's not the case. The advantage of touchscreens is that two elements, namely the element to be activated and the cursor or the keyboard tab, no longer have to be brought together. There's a problem with that, and that's the hand. Even if the visually impaired do not have the tip of their nose on the device - which is quite common - fingers and hands always cover part of the screen and of course inevitably the element that is to be touched. I honestly don't know how sighted persons can do it, but the tap of the finger has to be very precise, especially on small screens. This is still possible with a large touchscreen, such as that used in vending machines, because the elements on the left, right and top are still recognizable, but how should one e.g enter text with an on-screen keyboard if you are visually impaired? In this respect, the old mobile phones were even better suited for the visually impaired, the positions of the letters on the block of ten were quickly learned by heart, so that you could type blindly and look at the screen at the same time.

Blind advantage

The visually impaired are also not persuaded that they would be better off with a screen reader. In some areas, the blind have almost always been better off, being able to have texts read to them faster. Since many pages today at least meet the basic requirements of accessibility, I mean heading levels or navigation as lists and countless helpful screen reader functions, blind persons are often confronted with fewer barriers than the visually impaired.

Design suitable for the visually impaired

Designing for the visually impaired includes several elements:

  • Clear orientation lines, either through real lines, through the positioning of elements or through white space
  • Dark writing on a light background - is better for all users. There are visually impaired persons who use light writing on a dark background or other color combinations. But they can control that better themselves. If you have your computer set to invert colors by default, you will need to turn this setting off if you come across websites that themselves use light text on a dark background
  • Sufficiently large buttons and other clickable elements.
  • clearly recognizable keyboard and mouse focus
  • easily recognizable form fields
  • easy to read font and sufficiently large font size
  • Refraining from decoration in all areas where it is necessary to read or interact with the site