In order to communicate to blind people what images on web pages show and represent, you have to name them correctly, describe them and provide them with suitable attributes. What needs to be considered to ensure accessibility?
Insert images into HTML
To insert an image in HTML, the source code looks like this:
<img src="Path_to_image.jpg" alt="Garfield doing sports" title="Garfield doing sports" />."Garfield playing sports" must be replaced with the image's own description. This applies to both the alt and the title attribute.
Explanation
- src is used to specify the path where the image is located.
- Title sets the text under the mouse when the mouse pointer is on the image.
- With alt the alternative text is set. This can be seen if the image cannot be loaded. But screen readers also read it.
What is the point of all this?
The Alt Attribute
Blind people are not able to see what is on a picture. Therefore, the alt attribute should be used. It is also displayed when pictures cannot be loaded for whatever reason. But what should be described?
A short, superficial description of the picture is perfectly adequate. The description should convey what is perceived at first glance. The picture description should not be longer than 80 characters. The 80 characters are derived from the maximum length of a standard Braille display. Braille displays are available for stationary use with 40 or 80 characters. The picture description should fit on one line, so to speak.
"A black cat lies yawning in the sun and is visibly at ease." This description fits within the 80-character limit.
If the alternative text is missing, the image is not available for the screen reader. It makes no difference whether the alt attribute is completely missing or left blank. File names as alternative text are not satisfactory information. They are usually long, cryptic and say nothing about the content.
Title attribute
The title attribute displays a tool tip when the mouse pointer is on the image. The same description is used here as in the Alt attribute. Everything that goes beyond this can be set as a caption.
Caption
The caption, as the name suggests, is found below the image. Its purpose is to provide additional information or to highlight aspects of the image. Comments on the image are also often found in the caption. A caption is created in the source code as follows:
<figure> <img src="Pfad_zum_Bild.jpg" title="Garfield beim Sport" alt="Garfield beim Sport" /> <figcaption>Garfield has discovered running for himself. He is already registered for the upcoming Berlin Marathon.</figcaption> <figure>The caption is not a replacement for the alt or title attribute!
Alt and title attribute
Now the question arises as to whether the title and alt attributes are really necessary. If one wants to decide for one of the two, then the alt attribute is to be used. In the past, this was often done incorrectly, which is why screen readers also read out the title attribute when there is no alt attribute. This has been tested with JAWS 2020, NVDA 20.3 and Microsoft's Narrator. However, the technically correct approach remains to use the alt attribute. If both the alt attribute and the title attribute are used, the screen reader only outputs the alt attribute. So there is no need to worry about duplication of information if both are used.
Newsletters and other nicely designed mails
We all know it: e-mails that are overloaded with pictures. The search for the actual information can then take a while.
Screenshot of a mail with images without ALT IMG text
There are also such mails that consist entirely of pictures with text on them. One leading ticket retailer managed to do it in such a way that there was absolutely no information I could draw from the certainly appealing ticket offer. The alternative texts were limited to the word "Offer" followed by a number.
So making emails accessible is also a must if you have a serious interest in reaching customers. Unfortunately, the phrase "blind people are not our target group" is still widespread. But whether I, as a blind person, am interested in the products on offer is not determined by my blindness!
Social media
For social media, picture descriptions can be more detailed. Especially since images are more often at the centre of events here.
On Twitter, it often happens that a combination of text and image is posted. The picture itself, however, does not receive a description. What remains is the text on its own. The meaning of the tweet thus remains hidden.
Add picture descriptions on Twitter
Twitter itself offers instructions on how to add image descriptions.
The picture description may be more detailed here. You have up to 1000 characters at your disposal, which are not counted towards the quota of the tweet.
By adding picture descriptions, blind users are given added value. They can participate more often. This in turn is an advantage for everyone.
On LinkedIn, it is also possible to add picture descriptions (120 characters). It should be noted, however, that this does not work from mobile devices. The LinkedIn help page tells you more about this.
On Xing, it doesn't seem to be possible to add image descriptions at all. Unless you write them directly in the body text of the post.
Facebook offers the possibility to automatically add descriptions to pictures. However, such a description only consists of keywords. For example, a landscape photograph can be described with "tree, sky, cloud".
A manual image description is therefore always preferable. It could, for example, convey the information whether it is a photo of a forest or a photo of a single tree and thus provide more context.
What is a good picture description?
A good picture description should get to the heart of the matter as briefly as possible. These three questions can serve as a guide:
- What can be seen in the picture?
- What jumps right out at you?
- What effect do you want to achieve with the picture?
The answer to the questions depends on where this picture is used. The picture description of a painting will be different on a page for art lovers than in an article in which the picture is only an ornamental accessory.
A more detailed look at picture descriptions follows in a separate article.
Once again in brief
- Images without an alt attribute are invisible to screen readers.
- The title attribute displays a description as a tool tip.
- Image descriptions should be as concise as possible (80 characters).
- The context determines what the focus is on.
- All channels in which images are used should receive image descriptions.
Screencast demonstration
The following screencast shows how it works with a screen reader when no attention is paid to meaningful image descriptions.
Screencast: Pictures in HTML (german only)
