Selection and Description of Content Images

It is always useful to use images in a text. They loosen up the text and ideally underline its core message. In many cases, graphics make it easier to understand, for example when a development is summarized in a diagram. A current trend are interactive information graphics, which, for example, clearly display large amounts of data. For many people, such graphics can make complex content easier to understand.

Article Content

• What are Content Images?
• graphics
• Descriptions
• Image selection
• Computer-generated Graphics
• Read more

What are Content Images?

In this section I would like to deal with content images, which are mainly used to supplement textual content or as information graphics. In the conceptual part, I deal with colors and graphics that are used in design and as functional graphics.

In the following I speak of images when it comes to photos of people, animals or objects. They are usually created with digital cameras. Graphics, on the other hand, are schematic representations that are usually generated with a program. The file formats are the same for both forms of representation, but they have different purposes and therefore require different approaches.

graphics

There are three ways to add descriptive text to images in HTML:

• The alt attribute is used to add alternative text to the image. The alternative text is displayed when the image cannot be loaded for some reason and serves as a textual description of the image for the blind.
• The title is displayed when the user hovers over the image, so it is visible to all mouse users.

Separate from these attributes, there is the caption that appears immediately below the image and is readily visible to all users. It can be used as an alternative to the long description.

Descriptions

In the case of journalistic or editorial texts, the images rarely have a really relevant message. Here it is sufficient to enter the name of the person depicted, the place oto name an object. You should only describe the image object if it contributes to understanding the text. Longer descriptions can be found in the image caption.

accommodate: “Angela Merkel is harshly critical of the opposition” is perfectly adequate for alto or caption in most cases. Just imagine what information you would need if the image didn't appear or wasn't recognizable. A detailed description of the content is rarely useful.

The title and alt text can be the same: the screen reader reads only one of the two descriptions, and sighted users typically don't see the alt text. The title should also contain a descriptive text, because sighted users can also benefit from a description. It is easier for visually impaired users to recognize an object if they know what it is.

The caption should be distinct from the alt and title text and should provide additional information.

Image selection

When selecting an image, it is important that the image object stands out clearly from the background. That helps the persons with numerous color blindness and the visual impaired.

other than that, hardly any concrete recommendations can be made. The image object is what actually interests the user, almost always an image of a person, an object or an animal.

If possible, strong stimuli such as bright colors should be avoided, as people with cognitive disabilities can react sensitively to them.

Computer-generated Graphics

For self-created graphics such as diagrams, it is crucial that all components are clearly recognizable, this also applies to the accompanying texts, which are usually also in the form of pixel graphics be integrated. In the election results, the party names and percentages are often in the pie chart. This is suboptimal, since the slices of pie charts are usually designed in the party colors and often offer too little contrast. If the party names are missing completely, a red-green weakness can fully penetrate.

A compromise is to embed a small graphic in the article and click on it to offer the graphic in a better resolution. The embedded texts should not become pixelated when enlarged slightly. By the way, the easiest way to achieve this is to use vector graphics formats such as SVG. These do not become blurred even when enlarged.

The alternative to a graphical chart is of course the table from which the chart was created. Tables are not necessarily clear for the blind, but they are easier to understand than numbers interspersed in the text. Most of the time it doesn't make sense to write these values in the accompanying text or caption.