View all discussions

How to make the description of images and illustrations accessible?

by Yvonne Klein 2 years, 2 months ago

Questions from our open meetup (25.10.2022)

Q: How to make the description of images and illustrations accessible?

A: Descriptions of images and illustrations. Purpose is to make the image understandable and set into context for users with visual impairment. 
Do you need the image? If the meaning appears in the text, you might not need an image. But if you need the image, then a short description - very short and precise - for the screenreader needs to be added as a description. Something like "Dog walking in the park".

The screenreader reads the description of the image to give the user an understanding what the image is conveying and its purpose.

Q: What if some illustrations are processes?

A: Then it needs to be described in the text surrounding the image or provide a longer description in a separate linked page and in Alt-Text indicate that it is for example "a schematic representation of xxx". Always use short descriptions (further details on OER Accessibilty Kit > Best practice 2: Images).
The problem is that if you put the full description in the Alt-Text field, the user cannot skip it, as can be done within the body text, but screenreader will go through the whole description. So it is better to fully describe it in the text surrounding the image and use the image that has a short, concise description in the Alt-Text field.

Q: How to go about videos that illustrate a process in the lab? As the written instructions are sometimes difficult to see, the video serves as visualisation of the process. 
A: For such a case, you should provide both the video and the written instructions or information in the body text. It can be very helpful for visually impaired users, then to have the option to read through the written instructions of the process. If you provide both, then it has options for all users.
Also subtitles are important, but if not possible, then transcripts are better.

Q: If a decorative image is used, do we provide "decorative image" in the description?

A: see bullet-point about decorative image below:

  • Description of the image: Alt-Text or alternative text: very short and to the point
    • Word and PowerPoint - insert an image in your Word dokument or in your presentation and right-click the image > you see "Edit Alt-Text" option in the menu > Alt-Text field opens: you can add a short description or tick checkbox, if it is a decorative image 
    • Websites: if you add an image to your website, it gives you the option to add alt-text to the image. 
    • If it is a decorative image, tick the checkbox or you can also add a HTML-code in the script: Alt=" " and leave the part between inverted commas empty, so the screen reader will skip it. Including alternative text descriptions for decorative images “simply slows the process down with no benefit because the screen-reading software vocalizes the content of the [alternative text description], whether that alternative text adds value or not.” (Source: OER Accessibilty Kit > Best practice 2: Images)
  • Test it with the screenreader or read it to anther person, does it make sense?
  • Alternatively, you can send Oriane your resource for testing purposes.

Sources: