What's inside this article:
Basic information
This article explains the benefits of adding alt text for images and provides detailed guidelines on how to write alt text with examples.
What is alt text?
Alt text is a short and simple description of what’s visible in an image. It's included in the image’s HTML code and isn’t normally displayed on the page itself. Alt text serves several important purposes:
- Accessibility: Screen readers read alt text aloud for users who can’t see the image, including those with visual impairments.
- Fallback: If the image fails to load, the alt text appears in its place.
- SEO: Search engines use alt text to understand the content of images. Effective alt text can improve the visibility of your images in search results.
Guidelines
When writing alt text, follow the basic guidelines below:
- Don't include 'Image of...' or 'Picture of...'.
- Keep the text short and simple. In most cases, few words should be sufficient.
- Use the local language for your website.
For examples, go to the following chapter in this article:
Find additional advice below:
Focus on the key elements
Think about the purpose of the image. Why is it on the page, and what does it communicate? Focus on the key elements that support the purpose. It might be relevant to describe a person's facial expression, their clothing, the setting, or the weather conditions. However, you probably don't need to mention everything. Avoid excessive detail that doesn't add value.
Consider the surrounding text
Avoid repeating information that's already provided in the text nearby. If details are repeated in the alt text, visitors who use screen readers will hear the same content twice.
Provide relevant context
Provide relevant context to precisely communicate the image content. If the image shows a well-known landmark or public figure, include the name. (For example, you might mention 'The Eiffel Tower' or 'Volodymyr Zelenskyy'.) If the name is not widely known or not relevant to the story, you don't need to use it.
Examples
Below are photos accompanied by example alt text. Many possible alt text variations exist for every photo, depending on the context and where the photo is being used.
- A young girl looks at the camera with her feet in a fountain.
- A group of protesters holding Iranian flags.
- Volodymyr Zelenskyy smiles broadly walking alongside Ursula von der Leyen.
- An elderly woman rests her head against a gravestone.
- Girls in traditional clothing throw water.
- An aerial view of demonstrators walking over a bridge at night.
- Vladimir Putin holds a bunch of red roses.
Frequently asked
A caption is shown alongside the image on the public site. For this reason, the caption should do more than simply repeat what visitors can already see in the image. Captions play a key role in storytelling. A well-written caption provides context for the image and explains its relevance to the story.
Alt text replaces the image, so it should describe just what is directly visible in the image. Screen readers will read the alt text and the caption, so we generally don't recommend using the same text for both purposes.
Add alt text
From Pangea CMS, you can provide custom alt text for the following images:
- Main visuals
- Embedded images on content pages
- Gallery images
- Teaser images
Find detailed instructions in the relevant section below (according to the type of image):
After adding a Main visual to a content page, you can add custom alt text for the visual via General > Main visual alt text.
If you don't add custom alt text, the Main visual caption is used as the alt text.
If the Main visual alt text and Main visual caption fields are both empty, the image has no alt text.
When you are embedding an image into a text content page, you can add custom alt text in the Alt text box.
If you don't add custom alt text, the Caption is used as the alt text.
If the Alt text and Caption fields are both empty, the image has no alt text.
For detailed information about embedding images, visit the following article:
You can add custom alt text for images on the following gallery pages:
Enter the alt text for each image under Alt text.
If you don't add custom alt text, the Caption is used as the alt text.
If the Alt text and Caption fields are both empty, the image has no alt text.
Static infographics pages typically display infographics rather than photos. For detailed guidance on how to write the alt text for these images, visit our dedicated guide:
In the Website teaser settings for a content page, you can add custom alt text for the horizontal and vertical image separately.
Enter the alt text in the relevant field below:
- Horizontal image alt text
- Vertical image alt text
The following rules apply:
- If the Teaser image matches the Main visual, the Main visual alt text is also applied for the Teaser image. You don't need to manually add the same alt text separately for the Teaser image.
- If you add a custom Teaser image, the alt text is managed separately from the Main visual.
For more information, visit the following article:
