In times of digitalization, the issue of accessibility must not be neglected. One way to make it easier for people with disabilities to access content on the Internet is through so-called alternative texts. These texts are designed to provide people with certain disabilities with the content of a website in a form they can understand. But: What exactly is such an alternative text? Who needs them? And how can you create one?
To make websites and web content accessible, alternative texts, among other things, are very important to facilitate access for people with disabilities. They convey information and functions for blind and visually impaired people as well as for people with physical or cognitive disabilities. They also help people understand graphics, photos, and controls. Screen readers or Braille displays use the text alternatives, making these elements accessible to people with disabilities.
On the other hand, they are also useful for search engine optimization. The text alternatives transfer the information about an image to the search engines. This improves the findability.
How to create text alternatives?
The answer to the question of how to create a text alternative is quite simple: to do this, just insert an alternative text in the appropriate area of an element that will be provided with such a text. Most developers apply this in a so-called CMS. The abbreviation CMS stands for Content Management System. This is a software that is used for the creation and management of web content.
The HTML programming language can also be used for this. That's where the alt attribute or also called alt-Tag comes into play. There it is inserted inside the img tag. The text is written in the inner area of the alt attribute, which is then output via the assisting technologies.
However, this alone is not enough. The title attribute should not be forgotten either, since there are screen readers that do not read the description of the alt attribute, but that of the title attribute. Therefore, it also makes sense to specify an identical text for both tags. In addition, this also has the function of displaying the content as additional information about an element when the mouse is hovered over the area.
Furthermore, there is the aria attribute. More precisely, the aria-label attribute or also the aria-labelledby attribute. These are used to label buttons or form fields.
The different types of images
In a world where we are becoming more and more digital, it is not enough just to create text alternatives. It is much more effective to describe the different types of images correctly, as they also differ in their function. However, these must first be recognized. Descriptions are useless if they cannot reflect the function of an image. So the question arises: What types of images are there? And what is the best way to describe them?
First, you should familiarize yourself with the differences between the various types of graphics. It is important to understand the purpose of a graphic. In general, a distinction is made between informative, functional and decorative graphics. In addition, there are the so-called typefaces. Here the description is very simple, one simply takes over here the text, which is to be seen in the diagram.
Informative images
In the case of informative images, the visible content of a graphic is conveyed by alternative texts. Attention is paid to information that is relevant to the message of the image. An example of this is a logo description. Here, a brief description is given of what the logo looks like and who it is from.
In the following example, a text alternative is integrated into a logo in HTML:
<img
src="logo.jpg"
alt="The Eye-Able logo. It represents an eye."
title="The Eye-Able logo. It represents an eye.">
</img>
Here, an image file is embedded in HTML using the img element, where the src attribute specifies the source of the image. The description of the graphic is inserted in quotes in the alt and title attributes. In this way, the text content "The Eye-Able logo. It represents an eye" is output via the screen reader or Braille display.
In this way, the barrier is removed and all people who use assistive technologies can understand what is seen in this graphic.
Diagrams
However, if it is a diagram, this must always be decided on a case-by-case basis. This often depends on the type and the information contained. If the chart contains only a little information, this can be included in the alternative text. For example, "Presents the parties' election results in a bar chart. Party A: 40%, Party B: 30%, Party C: 20%, and so on." However, if something more complex or lengthy is presented, it is recommended to include the detailed information in a subsequent text. The alternative text should then only state the type and purpose of the diagram. Additionally, it could be indicated that the more detailed description follows below. An example would be a chart showing population figures of the German states. The content would then read: "Represents the population figures of the 16 federal states in a bar chart. Note: The more detailed description follows in the text".
Functional images
Next, let's consider the functional images. These are linked graphics. They are divided into links, elements or buttons. In the text alternatives, you define the function and not what to recognize. Instead, you specify where the link leads to.
Here is such an example in HTML for a linked graphic:
<a href=“https://eye-able.com/“>
<img src=“logo.jpg“
alt="Home page from Eye-Able"
title="Home page from Eye-Able"
</img>
</a>
The a-Tag and the href attribute are used in HTML to create a link. In this case, the link is created to the page https://eye-able.com/. In the img element, we again see the logo of Eye-Able, but this time the alt and title attributes describe the function rather than the graphic. Thus, the content "Home page of Eye-Able" is now output via assistive technologies.
The same applies to symbols. For example, if a floppy disk is used, the appearance of the icon is not relevant for output with a screen reader because it symbolizes the function of saving. Another example is search icons. Whether this is a magnifying glass or not is irrelevant. Much more interesting is the action behind it. This represents a search option or the start of a search.
The situation is similar with buttons. A button that represents an arrow pointing to the right should never have "arrow pointing to the right" in the alternative text. For a sighted person, it is clear that the next page opens when you click on it, but not for blind people. This is because they only hear "arrow to the right" via the voice output. This is not clear enough or does not show that the next page opens when the button is pressed. Therefore, it makes more sense to provide these alternative texts with "go to next page" or "continue scrolling".
Decorative pictures
Another type of graphics are decorative images. These are used to decorate a web page. The procedure for creating alternative texts is very simple here. Here the content of the alternative text is left empty. It is important that the attribute of the alternative texts is still present. Only the text content is left blank here. This has the consequence that the screen reader skips this irrelevant graphic in the output.
How to write good alternative texts?
Now that the various graphics have been introduced, there is only one question left: "How do you formulate optimal alternative texts?" Once you know all these subtleties and differences of the images, there are only a few rules to follow. The following tips can help:
- Start of a text alternative:
Here it is to be made certain that no duplications arise. The beginning should therefore not start with: "The picture ...", "The graphic ...", "The photo ..." or "The link" .... Whether it is a graphic or a link is recognized and output by screen readers anyway. Therefore, this should be dispensed with.
Length of the texts:
How long an alternative text should be is not specified. However, one to two sentences should suffice for the description of a graphic. The ideal length is 80 characters. Why 80? Blind people often read these texts with the help of a Braille display. Braille displays can output between 40 and 80 characters at a time. For reasons of clarity, it is therefore advisable to stick to this limit. Of course, a text can be longer. However, it should not exceed 120 characters.
Spelling and punctuation:
Care must be taken to ensure correct spelling. If a word contains a spelling error, it can quickly lead to ambiguity, since a screen reader outputs exactly what is stored in the alternative text. Likewise, correct grammar plays an important role in understanding images. But correct punctuation is also relevant. Incorrect or missing punctuation makes it difficult for the listener to understand the graphic. Due to this, a spelling and grammar check should be performed before inserting the text content.
Copyrights:
Many graphics have a copyright notice. But is this information important for understanding an image? The answer is: No! For a good formulation of text alternatives this information is uninteresting, because in a picture description only the most important things are written. Therefore, this information should be omitted.
Feedback:
It is easy to determine whether the image description is successful. But how? This question is easy to answer. It does not require much effort. A brief feedback from a blind or visually impaired person provides information on whether the text content was formulated sensibly. But not everyone knows a person with an eye impairment. This can be solved in another way. Everyone who has not yet seen the picture can be questioned here. This can be done here in writing, of course, but also by telephone. As soon as a "positive" feedback comes here, the description is successful.
What actually happens when alternative texts are missing?
The lack of alternative texts for images can be particularly annoying for blind users. This would mean that they would not be able to see the content of the graphic. At the same time, the screen reader would only output the file name in such a case, such as: "img123.jpg". Such a description would not help anyone. Developers should therefore always make sure to use text content. However, it is also important to know the differences in order to be able to describe images and graphics in a meaningful way. Assistive technologies can then render them using the text alternatives. This also makes the Internet a bit more accessible for everyone.
