What's inside this article:
- Basic information
- Add alt text for an embedded image
- Add alt text for a Main visual
- Add alt text for an image on a gallery page
- Add alt text for a website teaser image
- What is effective alt text?
- What if my image includes text?
- How is alt text different to a caption?
- Is it always necessary to provide alt text?
Basic information
Alt text is a simple description of what is directly visible in an image. Alt text is included in the source code for the image and is not normally displayed on the public site.
Alt text serves the following purposes:
- Read aloud by screen readers for visually impaired visitors to your site and visitors who are otherwise unable to see the screen.
- Displayed on the public site if the image fails to load.
- Helps search engines index the image, so the image ranks more highly in image searches.
In Pangea CMS, you can add custom alt text for the following images:
Add alt text for an embedded image
When you embed an image into the body of a content page, you can optionally provide custom alt text in the Alt text box.
If you do not add custom alt text, the Caption is added as the alt text.
If the Alt text and Caption fields are both empty, the image has no alt text.
Create custom alt text for a Main visual
You can create custom alt text for the Main visual on the following content pages:
Enter the alt text via General > Main visual alt text.
If you do not create custom alt text, the Main visual caption is added as the alt text.
If the Main visual alt text and Main visual caption fields are both empty, the image has no alt text.
Create alt text for a website teaser image
In the Website teaser settings for a content page, you can create custom alt text for the horizontal / vertical image.
Enter the alt text in the relevant field below:
- Horizontal image alt text
- Vertical image alt text
The following rules apply:
- If a website teaser image matches the Main visual, it is not necessary to manually enter the alt text in the Website teaser settings. This is because the alt text for the Main visual is added automatically as the alt text for the website teaser image.
- If you select a custom website teaser image that does not match the Main visual, you need to manually enter the alt text in the Website teaser settings. Otherwise, the website teaser image has no alt text.
For more information, see the following article:
Create alt text for an image on a gallery page
You can create alt text for images on the following gallery pages:
Enter the alt text under Alt text.
If you do not add custom alt text, the Caption is added 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. Find special guidance on how to create the alt text for these images in our dedicated article:
What is effective alt text?
Alt text should include a brief description of what is directly visible in the image. Follow the basic guidelines below:
- It is not necessary to include 'Image of...' or 'Picture of...'.
- Keep the text short (maximum 1-2 sentences). In most cases, a few words should be sufficient.
Find examples of effective alt text with corresponding images below:
- A girl alone in an airport terminal with a suitcase and a toy dog
- A cat sleeping on a wall
- A Eurasian Eagle Owl landing on the hand of a falconer
Find additional tips in the sections below:
Consider the purpose
Before writing alt text, consider the purpose of the image. Why is it included on the page and what does it convey? Start by identifying the key elements. It might be important to describe a facial expression, the clothes someone is wearing, the setting, or the weather conditions. However, it's probably unnecessary to mention all these details.
For example, the image below includes multiple elements.
Any of these options might be effective alt text (depending what exactly you are trying to convey through this image):
- A woman and a toddler wearing traditional Ukrainian dress
- A mother gazing affectionately at her son
- A mother relaxing with her son in the forest
Consider the surrounding text
Before writing alt text, consider the text surrounding the image. Avoid repeating details that are already explained in the adjacent text, as this will mean repeated information for visitors who access your site using a screen reader.
Provide relevant context
Provide relevant background information and context to precisely communicate the image content. If the image shows a specific location or landmark, you might want to name it. If the image shows a known public figure, include their name.
For example, consider the image below.
You might use the following alt text:
- The US flag set against blue sky next to a statue of a woman
- The US flag set against blue sky next to the Statue of Liberty
In this case, second option is clearly more precise and effective alt text. However, in some cases, you need to consider what background information is relevant. For example, consider the image below:
Either option might be effective alt text:
- Lots of people relaxing in a lake on a sunny day
- Lots of people relaxing in Lake Balaton on a sunny day
If the image is included in a story about tourism at Lake Balaton, the second option is more effective alt text. Otherwise, it might be unnecessary (and even potentially confusing) to mention the specific location.
What if my image includes text?
If a photo includes text, it is generally recommended to include the exact text from the photo in the alt text (as long as the text is relevant to the story).
For example, consider the image below.
In this case, the alt text needs to communicate the exact text on the banner.
How is alt text different to a caption?
The caption is displayed directly below the image on the public site. For this reason, the caption should do more than simply repeat what is already visible in the image. Use the caption to provide background information and context that explain why the image is relevant to the story.
Alt text replaces the image if it is not visible (for example, if the image fails to load). For this reason, alt text needs to describe what is directly visible in the image.
NOTE: Detailed information about managing image captions in Pangea CMS is available in our dedicated guide.
Is it always necessary to provide alt text?
In some cases, it is recommended to leave the alt text empty. This applies for images that are purely decorative and do not convey any meaningful information.
