How to write good alternative texts

The new website is barrier-free and finally online after numerous tests and optimizations. However, this does not mean that the website remains permanently accessible. Many accessibility deficiencies arise retroactively – on an editorial level. Alternative texts are an example. Only meaningful alternative texts help the user. In this blog post, I'll tell you how to write good alternative texts.

Good alternative texts serve not only accessibility but also search engine optimization. After all, search engines such as Google & Co. are also blind.

What can you see in the picture?

Alternative texts represent an alternative to the visually conveyed content. A good alternative text, therefore, describes what can be seen in the picture. This applies to landscape and portrait pictures, but also to graphics such as organization charts or site plans.

A short, crisp alternative text is enough for screen reader users to have an idea of what can be seen on the image. If the alt attribute is missing, the screen reader will read the file name – and who can imagine something concrete under “IMG_837495.jpg”?

For more complex graphics, such as an organization chart, a longer description is required. There is no space for this in the alt attribute. In this case, the best way is to offer a detailed text version on a website directly next to the picture.

Where does the link lead to?

While the visible content is relevant for informative images and graphics, a different regulation applies to linked graphics. With linked graphics, the screen reader user wants to know where the link leads to or which function it triggers with a click. A typical example is a logo on a website that leads back to the homepage. The screen reader user is not interested in whether the logo can be seen on it. He wants to know where he lands when he clicks on the link. The same applies if files are linked. The user wants to know which file he is downloading or opening.

When is it better to omit the alternative text?

A third category is represented by so-called symbol images. Images, for example in the header area of a website – unless they are linked – are often only used for design purposes. They do not provide any information that could be relevant to blind or visually impaired users. Here it is recommended to leave the alt attribute empty. It is important that the alt attribute exists, but remains empty (alt=””). If the Alt attribute is missing completely, the screen reader reads the file name as described above. If the alt attribute is empty, the screen reader ignores the image so that the user can concentrate on the essential content.

Relevant or decorative?

The question of whether the picture conveys an important content or whether it has only a decorative character cannot be answered conclusively. In case of doubt, I recommend assigning an alternative text. Or you ask a blind or visually impaired person for their opinion. Because with all accessibility issues, people with disabilities are the experts and can, therefore, best assess which information is relevant to them.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.