A Guide to write good Alternative Alt Texts and Image Descriptions

This guide is designed to introduce you to writing meaningful alt text. It goes step by step. The reason for this guide is that this question is asked again and again from our customers.

Content

General information about alternative texts

The term alternative text is often used interchangeably with image description. In fact, there are many ways to convey an image description, alt text is the most common, but not always appropriate. Possible alternatives are ARIA Label, ARIA Labeled by or the title attribute. Longer descriptions could use a keyboard-accessible tooltip, a link to a new page with the description, or a folding accordion.

Alternative texts are only read out by screen readers. As far as I know, reading tools cannot read alternative text for the print or visually impaired. But I'd be happy to be taught better.

The information that it is a graphic or a link does not have to be in the alternative text. The screen reader always outputs the information "graphic" or "graphic link" and then the stored alternative text.

Copyright information or the name of the photographer has no place in the alt text. This information is irrelevant to the blind and a sign of lack of care.

Duplication of information in the alternative text and an image caption should be avoided. If a caption has a description and it logically follows the image, the alt text can be left blank. In this case, the blind person needs to know that the text belongs to the picture. The caption should therefore be directly below the image and form its own paragraph. Technically, this can be ensured via the attribute "Aria described by".

If all relevant information about the image is contained in the continuous text, the alternative text can be kept short. In practice, a blind person can display all of the images and alternative text in a document. With a few exceptions, no sighted person would do this either, so this should rarely happen.

Output economy as a principle of alternative texts

The question often arises as to why old texts should be kept short. Analogous to the narrative economy, we can speak of the expenditure economy here: Above all, blind persons must be able to filter superfluous information. The more information they are given that is not relevant in the current context, the more they are distracted from the actual content.

I am not aware of any screen reader that can process alternative texts sequentially. Alternative texts are usually read out in one piece, regardless of their length. That's why I advise against too long alternative texts. In particular, listing individual values ​​from diagrams rarely makes sense.

The argument is correct that no blind person needs to read the alt text in its entirety. You can also use this argument to put endlessly long texts on the web. Irrespective of this, something important can actually be contained in an alt text and then the blind person will miss this important information.

1. Is the graphic linked or does it have a function?

If the graphic is linked, the question arises where the link leads to. In the case of a linked graphic, the destination of the link is more important than what can be seen in the graphic. There are several conceivable cases:

The link opens a larger view of the image. Then the info picture description + "opens larger view" is enough. The larger view is usually irrelevant to the blind person, but they still need to know what the link is doing.

The link starts a download, eg of a brochure. Then the description can be, for example, "Download brochure XY".

If the link simply opens a new web page, you can proceed as with any other link. In any case, write down when the user leaves your website by opening the link, because blind persons don't always notice that.

If the graphic triggers a function, such as a graphic button, the description of the triggered function is relevant. So "right-pointing arrow" is not a good label, "next page" or "turn to the next page" is.

The alternative text should therefore contain the target of the link or the triggered action. In this case, there is no need to describe the graphic at all.

2. How important is the graphic?

The next case occurs when the graphic is not linked or has no function.

The question is: what would happen if the graphic didn't load? Would important information for the user be lost?

If this is not the case, a simple description of the graphic is sufficient. We recommend 80 characters or less, technically there is no limit.

relevance and context

The detail of an image description always depends on the relevance of the graphic. How relevant a graphic is always depends on the context.

The following examples are intended to illustrate this. But please always remember: Information contained in the continuous text does not have to appear in the image description.

Example I: A Deutsche Bahn article with a picture of a train

Example II: Sailing boat on the open sea

A sailing boat is often used as a starting point in a holiday catalogue. In this case, you would describe the image briefly because it is for decorative purposes.

If the picture were included in a sailing magazine, more information would of course be interesting: What kind of boat is it, what era does it come from, how many sails does it have and so on.

Example III: An elephant throws a basketball into a basket

This would also be a typical motif in a holiday catalogue. However, an animal protection association would communicate completely different information and, accordingly, the picture description would be different.

For symbols or icons that do not contain any information of their own, the alternative text should be left blank.

For example, icons are often placed in front of link lists. This includes the hand pointing to the right or an arrow. These icons have no added value for the blind and here the alt text should be left blank. A short description would disturb the flow of reading. Technically, the alt attribute is set but not filled.

3. The graphic contains its own information

What is common are graphics that contain information themselves: diagrams, organizational charts, data charts, and so on.

3.1. Is the information contained in the text or in a table?

If so, the alternative text can be kept short. The information "Detailed information can be found in the text" or "... in the table" can be attached to the alternative text. If the text is long, it makes sense to refer to the specific section where this information can be found.

3.2. The information does not appear in the text

If no, we recommend using a simple table for numerical values.

A longer, systematic description is recommended for complex graphics, such as organizational charts, sports exercises or works of art. It can be provided on the same page or via a link on an extra page. Another option that is technically easy to implement is to provide the description as a tool tip or in an accordion below the image. An accordion has the advantage that it is technically easy to implement without barriers. The advantage of these measures is that the description by accordion, tool tip or other means is also available to persons who do not use a screen reader and cannot see the graphic or cannot see it well.

There is detailed information in the articleHow do I describe something for the blind .

3.3 Graphics generated from tables

If graphics were created from a table, the table should always be offered as well. It is simply a waste of time to describe line, column or bar charts in detail. In the alt text, briefly describe the development as a sighted person would notice it at first glance and otherwise refer to the associated table in an easily recognizable manner.

Image galleries

Image galleries are a special challenge. In itself, a description of each individual picture does not make sense, because the pictures themselves have an effect here, but not the description. In my opinion, a preceding sentence that refers to the fact that there is a picture gallery here is sufficient. The alt attribute can be left blank for the images to be recognized as decorative.

Cases are conceivable in which the description of individual images from a gallery makes sense. These are, for example, article galleries where the picture is the only reference to the offer/product. What always applies to clickable/linked graphics applies here: either the target or the purpose of the link is described.

Icons and Emoticons

Icons that are used in continuous text generally do not require any alternative text. An example are special icons that are used instead of list icons. The HTML markup for lists should simply be used here, the list symbols are then generated with CSS and are correctly not read out to blind persons.

If icons are used to highlight text passages, they also do not need a description. An example would be a preceding exclamation mark. The highlighting as such should be communicated semantically correct, for example via the HTML elements em or strong.

A special case are graphic emoticons that are relevant for understanding the text, for example a smiley to show that a statement was meant ironically. Such graphics must have a description, since information is clearly communicated graphically here. By default, emojis from the Unicode standard are read to the blind with a text description and do not require alt text.

Should alt texts be used to describe persons's appearance?

In recent months and years, I have often been asked whether one should describe persons in alt texts. Again, the question always depends on the context, but I tend to say no, I have described the reasons elsewhere . Another reason is the spending economics mentioned above.

A pro argument can be that diversity should be represented. This applies, for example, if you depict persons from different backgrounds in the pictures.

Of course, it is always possible that the characteristics of a person should also describe a person: an older man who does sports says something different than a young woman who does sports. If we swap young and old for slim and overweight, it becomes a little clearer.

However, you can see the problem here: As soon as you work with adjectives, you evaluate . As a general rule, however, reviews should be avoided.

Another problem are invisible disabilities or models. In the case of invisible disabilities, the disabilities cannot be seen, so they do not belong in the image description. If the persons in the photos are "not real", i.e. some models who only pretend to be diverse in the workforce, it becomes finally difficult.

There is no conclusive assessment on this subject. If you think that the person's appearance, age, background or any other characteristic is relevant to the sighted/blind person, by all means keep it short, don't overinterpret and use adjectives sparingly. In my opinion, terms such as attractive, obvious, white/black (related to skin color) should be avoided completely.

Are there indescribable images?

Yes and no: In theory, any image, no matter how complex, can be described. In practice, however, many graphics are so complex that they cannot be meaningfully described. Examples are extensive maps, electronic circuit diagrams, construction drawings and much more.

Many of these graphics are primarily used in very specific contexts. Of course, inclusion is always a goal. However, I can hardly imagine why an electronic circuit diagram or a construction drawing should be described for the blind, for example. They are aimed at specialists, which means that even sighted persons without this qualification would be overwhelmed.

There are basically several ways to describe them. One possibility is to take out levels and only describe floor plans.

Another possibility would be to actually describe the graphic systematically. The problem here, however, is that some blind persons's visual imagination is not developed well enough. For example, I can't memorize complex graphic descriptions, although my ability at this point is generally manageable, it may be that other blind persons can do it better.

Another possibility are tactile models, such as those from a 3D printer or a real electronic control panel that can be touched. Tactile graphics can also be recreated relatively easily using Lego or similar principles. However, the bottom line is that tactile graphics have a much lower resolution than visual graphics. This means that either you have to show fewer details or you need significantly more space.

In fact, we have not yet developed a clean methodology to adequately describe such complex graphics. In my opinion, we cannot avoid personal descriptions at the moment, i.e. a description by a real person who can then be asked questions.

role distribution

From my point of view, it is the task of the content creator to create image descriptions. The upstream or downstream persons such as desktop publishers usually do not have the necessary know-how or do not know what the message of the image is supposed to be. In any case, you should clarify beforehand who will take on this task, so that the responsible person can calculate the costs reasonably and the quality is sufficient. Especially with PDF brochures, the creation of descriptions is sometimes an enormous amount of extra work. When it comes to website templates, you have to make a clear distinction between frames – i.e. logos, banner graphics and the like – and content. The former is responsible for the conception and the latter for the editors.

In general, the requirement for image descriptions also applies to automatically generated graphics such as frameworks for infographics such as HighCharts. Here - as described above - the description must be supplemented by a table.

Further Reading