Accessibility links

Breaking News
SEO

Creating alt text

update

What's inside this article:


Basic information

Alt text is a simple description of what is directly visible in an image. Alt text is important for both SEO and site accessibility. When you add an image to a content page, you can optionally create custom alt text for the image. The 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.

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.

In Pangea CMS, you can add custom alt text for the following images:

NOTE: In future releases, we plan to bring custom alt text for more images (such as images on Photo gallery pages).



Add alt text for an embedded image

When you embed an image into the body of a content page, optionally provide custom alt text in the Alt text box.

If you do not add custom alt text, the Caption is applied as the alt text.

If the Alt text and Caption fields are both empty, the image has no alt text.



Add alt text for a Main image

After you add the Main image for a content page, optionally provide custom alt text via General > Main image alt text.

If you do not add custom alt text, the Main image caption is applied as the alt text.

If the Main image alt text and Main image caption fields are both empty, the image has no alt text.



Add alt text for a website teaser image

After you add images in the Website teaser settings for a content page, optionally provide custom alt text in the following fields:

  • Horizontal image alt text
  • Vertical image alt text

The following rules apply:

  • If the website teaser image matches the Main image, it is not necessary to add custom alt text. This is because the alt text for the Main image will be applied automatically as the alt text for both website teaser images.
  • If you select a custom website teaser image that does not match the Main image, manually add the alt text for the image in the Website teaser settings.



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

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.



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 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.


Pangea CMS Guide

Need help?

XS
SM
MD
LG