What's inside this article:
- Basic information
- Add alt text for an embedded image
- Add alt text for a Website teaser image
- How can I write effective alt text?
- How is alt text different to a caption?
- Is it always necessary to provide alt text?
Basic information
The alt text (or 'alternative text') for an image is not directly visible on the site. It's included in the alt tag for the image in the source code.
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 site if the image fails to load
- Helps search engines index the image so it ranks more highly in image searches
Consistently applying effective alt text for images helps ensure your site is accessible for everyone. Without it, visitors who cannot see the screen might miss out on crucial information and have a frustrating experience on your site.
Add alt text for an embedded image
When you embed an image, optionally provide custom alt text in the Alt text box.
For information about best practice, go to the following section:
The following rules apply:
- If you do not add alt text, the caption is automatically applied as the alt text.
- If you do not add a caption or alt text, both the caption and alt text are empty.
- If you add alt text but no caption, the alt text is filled and the caption is empty.
Best practice is to provide both a caption and custom alt text (alt text should not be the same as the caption). For detailed information, go to the following section:
Add alt text for a Website teaser image
When you add images in the Website teaser settings for a content page, optionally provide alt text under Horizontal image caption / Horizontal image caption.
This text is applied only as alt text (it is not directly visible on the site). For information about best practice, go to the following section:
For general information about Website teaser settings, see the following article:
How can I write effective alt text?
Alt text should include a brief description of what is directly visible in the image. Follow the basic guidelines below:
- It's 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
Precisely communicate the image content by providing relevant background information and context. 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.
How is alt text different to a caption?
The caption is visible 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.
Is it always necessary to provide alt text?
In rare cases, it's recommended to leave the alt text empty. This applies for images that are purely decorative and do not convey any meaningful information.
