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 to use so-called alternative texts. These texts are designed in such a way that they reproduce the content of a website in a form that people with certain disabilities can understand. But what exactly is an alternative text? Who needs them? And how can you create one?
In order 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 to understand graphics, photos and operating elements. Screen readers or Braille displays use the text alternatives and make 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 findability.
How do you create text alternatives?
The answer to the question of how to create a text alternative is quite simple: an alternative text is simply inserted in the corresponding area of an element that is provided with such a text. Most developers use this in a so-called CMS. The abbreviation CMS stands for Content Management System. This is software that is used to create and manage web content.
The HTML programming language can also be used for this. This is where the alt attribute, also known as the alt tag, comes into play. It is inserted within the img tag. The text is written in the inner area of the alt attribute, which is then output via the assistive technologies.
However, this alone is not enough. The title attribute should not be forgotten either, as there are screen readers that do not read the description of the alt attribute, but rather that of the title attribute. It therefore makes sense to enter an identical text for both tags. This also has the function of displaying the content as additional information about an element when you move the mouse over the area.
There is also the aria attribute. More precisely, the aria-label attribute or the aria-labelledby attribute. These are used to label buttons or form fields.
The different types of images
In a world in which we are becoming increasingly digitalized, it is not enough to simply 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 of all, you should familiarize yourself with the differences between the various types of graphics. It is important to understand the meaning and purpose of a graphic. In general, a distinction is made between informative, functional and decorative graphics. There are also so-called typefaces. Here the description is very simple, you simply copy the text that is shown in the graphic.
Informative pictures
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. This briefly describes what the logo looks like and who created it.
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, with the src attribute specifying the source of the image. The description of the graphic is inserted in quotation marks 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 shown 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 only contains a small amount of information, this can be included in the alternative text. For example: "Shows the election results of the parties in a bar chart. Party A: 40%, Party B: 30%, Party C: 20% etc.". However, if something more complex or longer is presented, it is advisable to insert the detailed information in a subsequent text. The alternative text should then only state the type and purpose of the diagram. In addition, it could be pointed out that the more detailed description follows below. An example would be a chart showing the population figures of the federal states. The content would then read: "Shows the population figures of the 16 federal states in a bar chart. Note: The more detailed description follows in the text".
Functional images
Next, we look at the functional images. These are linked graphics. They are divided into links, elements or buttons. In the text alternatives, the function is defined and not what is to be recognized. Instead, you specify where the link leads to.
Here is such an example in HTML for a linked graphic:
<a href=“https://services.eye-able.com/“>
<img src=“logo.jpg“
alt="Home page of Eye-Able"
title="Home page of Eye-Able"
</img>
</a>
The a tag and the href attribute are used in HTML to create a link. In this case, the link to the page https://services.eye-able.com/ is created. In the img element, we again see the Eye-Able logo, but this time the alt and title attributes describe the function rather than the graphic. The content "Eye-Able homepage" is now output via the assistive technologies.
The same applies to symbols. For example, if a floppy disk is used, the appearance of the icon is not relevant for the output with a screen reader, as it symbolizes the function of saving. Search icons are another example. Whether it is a magnifying glass or not is irrelevant. The action behind it is much more interesting. This shows a search option or the start of a search.
The situation is similar with buttons. A button that displays an arrow pointing to the right should never be labeled "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 indicate that the next page will open when the button is clicked. It therefore makes more sense to provide these alternative texts with "to next page" or "scroll on".
Decorative pictures
Another type of graphics are decorative images. These are used to decorate a website. The procedure for creating alternative texts is very simple here. The content of the alternative text is left blank. It is important that the alternative text attribute is still present. Only the text content is left blank here. As a result, the screen reader skips this irrelevant graphic in the output.
How do you write good alternative texts?
Now that the various graphics have been presented, there is only one question left: "How do you formulate optimal alternative texts?" Once you know all these subtleties and differences between the images, there are only a few rules to follow. The following tips can help:
- Start of a text alternative:
Care should be taken here to avoid duplication. The beginning should therefore not start with: "The image ...", "The graphic ...", "The photo ..." or "The link" .... Whether it is a graphic or a link is recognized and output by screen readers anyway. This should therefore be omitted.
Length of the texts:
How long an alternative text should be is not specified. However, one or two sentences should be sufficient to describe 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 also be longer. However, it should not exceed 120 characters.
Spelling and punctuation:
Ensure that spelling is correct. If a word contains a spelling mistake, it can quickly become unclear, as a screen reader outputs exactly what is stored in the alternative text. Correct grammar also 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. For this reason, a spelling and grammar check should be carried out 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! This information is of no interest for a good formulation of text alternatives, as an image description only contains the most important information. This information should therefore be omitted.
Feedback:
You can quickly determine whether the image description is successful. But how? This question is easy to answer. No great effort is required. Brief feedback from a blind or visually impaired person provides information on whether the text content has been formulated sensibly. But not everyone knows a person with a visual impairment. This can also be solved differently. Anyone who has not yet seen the picture can be asked questions. This can of course be done in writing, but also by telephone. As soon as a "positive" response is received, the description has been successful.
What actually happens if 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 understand the content of the graphic. At the same time, the screen reader would only display the file name in such a case, for example: "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 reproduce these with the help of the text alternatives. This also makes the Internet more accessible for everyone.
