Accessible Web Content 4: Alt Text

This article is written as part of our Accessible Web Content series.

What it is

Each image on every website around the world has the opportunity to have text data “embedded” into it. This is called alt text–short for alternative text–which is text that:

• Gets read out loud to visitors using screen readers,
• Is displayed to everyone when the image in unavailable,
• And is for search engines to use.

It’s very important that images have this text in place, and it is easy to do!

What it is not

Image alt text has a very specific purpose, and it’s for succinctly describing a photo. It should not be used for:

• Attributions to photographers. Use an image caption that shows up below the photo.
• Trying to improve your SEO with many keywords.
• Explaining infographics and/or writing lengthy paragraphs of description.

How to write it

Go through a quick self-assessment:

1. Is the image a decoration? (If it contains any visual meaning, people, places, or things, it is usually not a decoration)
   • Yes: Leave the alt text field empty or write “decoration.”
   • No: Continue to #2
2. Does the image contain any text? (For example: info-graphics, or images with text embedded)
   • Yes, less than 30 words: Write out the content in the alt text.
   • Yes, more than 30 words: Write a caption including the content instead of alt text.
   • No: Continue to #3
3. Describe the image in less than 2 sentences and as few words as possible. It is important that you do not describe the fact that it is an image, but describe what is in the image that makes it useful. It’s common to think of how you would explain the image to someone who cannot see, and use that as the alt text.

Tips

• Add a period to the end of alt text. This allows a pause in speech for screen readers.
• If you need more than 30 words, the content should go on the page itself (not in the alt text). It should be visual, below the image, like a caption.
• Context matters – always default to more vs. less. Each person will think differently about something’s importance.

WCAG Compliance

WCAG compliance is not the end-all be-all of accessibility. Even if your website is 100% AAA WCAG compliant, it still won’t be accessible to everybody. That said, it’s a great tool to use to gauge needs and how to move forward.

Relevant WCAG Criterion

For more detailed information straight from the source, visit the following pages:

• Item 1.1.1 – Level A – Non-text Content
• Item 1.4.5 – Level AA – Images of Text

How to update alt text in WordPress

• In the block editor, you can look for a field marked alt text, alt content, image alt, etc and enter it there.
• In the media library or a WYSIWYG, select/click a single image, and in the Attachment Details modal window, find the field marked Alternative Text.

How to update alt text in CloudCannon

• In the visual editor (denoted by yellow selection boxes around editable content), or in a WYSIWYG, you can:
  1. Click the image
  2. Click “update details”
  3. Enter your alt text in the “description” text box
• In the data editor (sidebar containing content fields) you can find a field marked alt text, alt content, image alt, etc and enter it there.

If you found this post helpful, consider subscribing to our newsletter for monthly updates and posts about digital design and development.