Alternative text
[Narrator:] Users with visual disabilities cannot see images on a screen. As a screen reader can only use information in text form to convey content to the user, we need to describe the image.
An alternative text provides a textual alternative to images in web pages, e-books, PDFs and apps. Adding alternative text to images is the first principle of accessibility. Even though it sounds simple, it is not. The web is full of images that have missing, incorrect or poor alternative text. So, let’s think a moment about how to design a good alternative text.
The alternative text is read by screen readers, allowing the content and function of the image to be accessible to those with visual or certain cognitive disabilities.
What is a good alternative text? Here are some basic guidelines for choosing a good alternative text: Describe the image as accurately as possible for the intended meaning. Think about what additional information the image brings to the text. Keep it short, without losing information. Do not include ‘image of’, ‘picture of’, etc., in your text. Do not repeat the same information that is provided as text within the context of the image.
The text should be written by the original author of the document, as they know best why the image was included. When determining appropriate alternative text, consider the context of the image relative to the message of the document.
For decorative images with no information, like a company logo appearing on every page of a PDF document, use an empty alternative text to signal to the screen reader that you have thought about alternative text and have decided that there is no information to be communicated. Or you could use the aria-hidden attribute in HTML or the artefact flag in PDFs to hide this content from users with visual disabilities.
For images with functions or links, such as form buttons or image maps, describe the content of the image and the function behind it. For example: Activate this button to submit your personal data to the server.
For simple images, describe the image, focusing on what is important in the current context. For example: Flag of the European Union, 12 yellow stars on a blue background arranged in a circle.
For complex images, such as a chart, graph or map, a more extensive description is needed. We can see a pie chart with some statistics. What would be a good alternative description? A three-dimensional pie chart graphic, divided into three slices using the colours red, green and blue. The red part makes up more than half of the size, the rest is made up of the green and blue part, where the green part is a little larger than the blue part. Hmm. This is not quite right. It communicates the visual appearance of the graphic, but not the content. It does not offer any hint what items are compared. A pie chart is made to communicate numbers in a visual form. If we cannot use the visual form, why not communicate the numbers directly?
Here is a better approach. Distribution of articles by journal category. Pie chart: Education = 68%, Science = 18%, Language = 14%. This is exactly the message the image contains. If the same information is communicated in the text or a caption under the image, then there is no need for alternative text at all.
What alternative text would you use for this image? Let us take a moment to think about this. Pause the film and continue when you have an idea. Do you have an idea? Good, let's compare it to our proposition.
Here is how a screen reader would read the text to a user: In 1952, the Treaty of Paris came into force. It was signed by six countries: Belgium, Germany, France, Italy, Luxembourg and the Netherlands. In 1973, they were followed by Denmark, Ireland and the United Kingdom, and then by Greece in 1981. In 1986, Spain and Portugal acceded to the European Communities. In 1995, Austria, Finland and Sweden joined the European Union. The year 2004 saw eight central and eastern European countries (Czechia, Estonia, Latvia, Lithuania, Hungary, Poland, Slovenia and Slovakia) and two Mediterranean countries (Cyprus and Malta) join. Bulgaria and Romania acceded in 2007 and, finally, Croatia joined in 2013.
What can we learn from this? Even though alternative texts should be kept short, sometimes it is worth adding a full-length description.
The standard does not define a maximum length for an alternative text. You should always try to communicate the full message of an image to the user.
The selection of an alternative text is often a matter of personal taste. When multiple people write an alternative text, the probability is very high that they will write different texts.
Alternative texts are an important part of Search Engine Optimisation. Search engines will evaluate the alternative text to make the images findable. As a consequence, making your website more accessible will improve your search engine ranking.
Even though we have only discussed alternative text for images here, this should be applied to all non-text content, for example media or applets. Even tables can have an alternative description.
Related concepts
There are some related concepts that we should discuss. Captions for images are additional text descriptions that are displayed close to the image. Captions provide additional information about what the image is conveying. Who is the painter of this painting? Where was this photo taken?
Information in captions does not need to be repeated in the alternative text as they are visible to everyone. If a web page contains an image requiring a really long alternative description, you might want to create a separate web page or text file to store it. This information can then be referenced using the longdesc attribute. For details, please refer to the HTML/ARIA chapter.
Titles in web pages are used to mark images with text that appears when someone hovers over the image. Titles can be read by some screen readers, but not all. So, do not rely on it.
An image should always have an alternative text. One should not be used instead of the other. Each should be used properly, for the things that they were designed to do.
Multilingual documents
Documents can contain several different languages or can be published in multiple languages. Different alternative texts need to be included for the different linguistic versions. When translating a document, do not forget to translate all alternative texts too.
For web pages: Choose a content-management system that allows you to enter alternative text in multiple languages for a single image. Otherwise you have to upload and maintain the same image multiple times for every language. Use the language of the document to describe your image, or mark the language of the alternative text in the HTML code, so it is spoken with the correct voice.
For PDFs: Many flyers or books contain text in more than one language. Unfortunately, we cannot declare multiple alternative texts in different languages for a single image. There is no elegant solution to this problem.
For e-books: Even though e-book technology is based on HTML, not every e-book reader can read a document in more than one language. Often, the best solution is to publish an e-book file for each language.
For apps: Separate the program code from the text content. This way you can add additional languages and alternative descriptions to the images without touching your program code.
Where to continue?
In this chapter you have learned what an alternative text is and the influence it has on the accessibility of your digital publications. Depending on your personal interests, you could continue with one of the following chapters:
- Fonts, sizes and colours
- Text transcripts, captions and sign language
- Plain language
[Automated voice:] Accessibility. For more information visit: op.europa.eu/en/web/accessibility.