Accessible Information Graphics for cognitive and visually Impaired

Diagrams, information graphics and visualizations play an increasing role in communication. In this post, I would like to address the question of how this content can be optimized for the visually impaired and blind.

Article Content

Why Info Graphics should be accessible

Images and photos can be taken or selected in such a way that they can be easily recognized by the visually impaired. Curiously, in the accessibility scene and outside, there is constant talk about alternative image descriptions for the blind, but the much larger group of the visually impaired is left out. What helps the visually impaired in terms of images usually also helps sighted persons, especially when it comes to viewing images on mediocre smartphone displays - Accessible web design for the visually impaired.

For the sake of simplicity, I would like to distinguish between photos and graphics: photos and images are taken, graphics are computer-generated. Both have their advantages and disadvantages. In fact, for information graphics, code-based formats like SVG are optimal because they can be easily resized like text without sacrificing quality.

In general, the aesthetics and attractiveness should not suffer. Accessibility should benefit the disabled, but not deter the non-disabled. To paraphrase a dictum slightly: Accessibility can be everything, just not boring. It is of course not forbidden to use color in children's and youth publications. However, the concerns of the visually impaired should not be neglected.

Please keep in mind: There is an option to zoom content larger. But that doesn't mean that users want to do it. You have to know that there is something worth zooming in on. And even if you know this, it does not mean that you do it. Think about your own behavior: If you don't absolutely want to or have to, you avoid annoying or tedious tasks.

Effects of visual impairments

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

Decreased 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.

Contrast weakness and color blindness

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

Color blindness 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.

I would like to leave out the broad field of color perception disorders. This is so broad and individual that there can be no off-the-shelf solution. Individual adjustments are necessary here.

visual field limitations

The field of view 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.

The role of images for the visually impaired

The visually impaired are closer to the sighted than to the blind when it comes to dealing with images. This means that they show similar reactions, automatically focus on images and react emotionally no differently than sighted persons would - provided they take the picture and recognize its content straight away. With high magnification it is possible that the image is not seen or only a non-descriptive section of it. Imagine you have a puzzle and you can only look at one piece of the puzzle at a time.

problem areas

Overall, three problem areas can be identified:

The image size

Typically, images in raster formats such as JPG are optimized for a minimum size. If you go beyond that, the images quickly become blurred.

When it comes to image size, it is particularly relevant that the image can be enlarged and reduced, while the important image elements should still be recognizable. Reduce because there are also visually impaired persons with a small field of vision. As a rule of thumb, the image should still be legible at 50 percent reduction and 200 percent enlargement.

Ideally, you work with vector graphics, because these can be changed continuously.

The number of elements

If too many elements are displayed in an image, the image object is difficult to identify. For certain types of images, such as hidden objects, this is style-related. With other pictures, however, it leads to confusion: If I show a green landscape, is the landscape the content of the picture or is there something else in all the green that the photographer wanted to emphasize? If I show a rubbish dump, I see a lot of rubbish, but the visually impaired may see individual pieces of rubbish and wonder what it's all about. We simply assume that the meaning of the picture is not clear from the context.

An image without a clear focus increases cognitive load. The visually impaired looks for the content of the picture, but sees many individual elements whose relevance he cannot assess if he cannot recognize the picture as a whole.

hidden object

A sighted person sees an image as a whole at a glance. A visually impaired person has to open up the image sequentially depending on their visual acuity. If many different objects are included, he must identify each object individually and assess whether it is the image object. Especially with non-professional photos, for example on social media channels, we often find such images.

In the case of complex infographics with their own visual language, memory is also required. The visually impaired must remember individual image elements and their purpose, since they cannot constantly switch between the object and the legend or explanation. It is safe to assume that a visually impaired person will have less experience with infographics than a sighted person. This is also why it will be more difficult for him to decode the symbols.

text in pictures

Finally, text in images is always a bad idea. We actually find this in professional organizations as well, and even in the case of organizations for the disabled, it often happens that they post pictures of event posters on Twitter or Facebook without text comments and descriptions. You should then read the event data from them. Blind persons can't do that, and the visually impaired can easily miss what's written there. In any case, it is extremely uncomfortable to read text from images. The text or essential data should be in the description. You can easily check this yourself: If the text cannot be selected with the mouse cursor, it is part of the image.

components of an image

An image basically consists of two parts: the image object and the background. The image-object is what the gaze should actually focus on: a person, an animal or an object. Accordingly, the background is what is around the object.

Position of the image object

The image object is ideally located above the actual center of the image. That's where we look first when we take pictures of persons or animals.

The background should differ as clearly as possible from the image object. If the background is dark, it can become lighter towards the image object or vice versa. This makes it easier for the visually impaired to find the image object.

Computer generated graphics

As mentioned, graphics are computer-generated. They are usually drawn by the user themselves or generated with programs such as Excel.

Graphics have an advantage over images: They can usually still be recognized even when the color is reversed and in other color combinations. This also applies, for example, to stylized figures or to the graphics used in easy-to-understand language. So if you are planning a visually impaired-friendly publication, you should rather rely on graphics.

There is also intelligent color inversion, which does not invert the colors of images and graphics. By default, however, I only know this for Apple devices. Windows and Android have not yet been able to do this by default.

alternative versions of Info Graphics

Thanks to modern graphics libraries, it is no longer a problem to offer multiple versions of an infographic. For example, you can offer multiple tabs showing different versions of the graphic. The following options among others would be conceivable:

  • a higher contrast version or a version that works in grayscale
  • a simplified version of the graphic with fewer elements
  • the graphic as an HTML table - as far as this is possible

Regarding the first aspect: It should be enough if you create two color palettes: one for the original version, one for the more contrasting version. We actually don't think it's useful to offer multiple versions of the same graphic, but sometimes there's no other way.

Regarding the second aspect: Such a graphic can be easily created if you work with several layers. You could put the elements for the simplified version on the first level, and the complex elements on the second level.

Regarding the 3rd aspect: If graphics are created from tables, it always makes sense to offer the table additionally.

Functional graphics and emojis

A special challenge are graphics with connected function. These include the printer icon for "Print" or the letter icon for "Send Mail". Previously, the HTML title would have been used to describe these objects. Today, as mentioned above, the title is no longer perceptible for many persons when using the website without a mouse. A visual text description is often not used due to space constraints.

The recommendation remains to use an icon language that is as recognizable and learned as possible, which means that the designer should not let off steam creatively here. Also make sure that the graphic is still clearly recognizable in a contrast mode.

Emojis and emoticons for the visually impaired

A special problem are emojis and emoticons. The differences between faces in emojis are rudimentary, at least for the visually impaired. They may recognize the most common emojis, everything else is not intuitively recognizable for them. Such graphics should not be used frequently.

You should always keep in mind that users access the site with smartphones or small tablets. Just because an icon is perfectly recognizable on a 24-inch display that doesn't necessarily mean that it's the case for a €150 smartphone.

Image descriptions for the visually impaired

The title is an HTML attribute. The text is displayed when you move the mouse cursor over the image. Since there is usually no mouse over on smartphones and tablets, the title remains invisible to such users. It can still be used - it doesn't bother anyone - but you can't rely on the user noticing it. If possible, it should not be identical to the caption.

A caption can be used instead of the title. It is visible to all users, including blind persons.

Visually impaired persons benefit from a description even if they have relatively good eyesight. They recognize things more easily when they know what they should be looking at. For example, if a dog is shown, you can look for the dog's snout, eyes and other easily recognizable objects.

An image description can and should be kept short and neutral. With a few exceptions, such as works of art or when the image is the actual subject of the text, excessive descriptions are rather distracting for most readers.

Information graphics for the blind

This section can be kept relatively short. There are blind persons with a usable sight, they will work in a similar way to the severely visually impaired, i.e. they can look at information graphics with a strong zoom.

Blind persons without a visual aid that can be used in this context do not have this option. Despite all the technical progress, there are currently only two classic ways of making information graphics accessible to you:

For graphics that show numerical values ​​and quantitative developments, the data table is the best alternative.

For graphics that do not show numerical values, there is only the image description.

There are other options, but in most cases they are very complex. 3D printing and related methods can be used to create tactile graphics. There are also displays that can display graphics using modified surfaces. However, they are expensive and relatively rare to find in private homes.

Further Reading