Alt Text

Note: This document is a work in progress as of May 15th 2023. Please contact uwbweb if you have any question.

Alt (alternative) text best practices

Avoid images of and with text where possible.
When uploading a new image, always provide alt text in the media library to images that will be used to convey information only. In general, most images on our site will be presentational only and will not require alt text.
Icons are images and required alt text as well.
Never use animated gifs on the university website.

How to write alt text for images

Add context. Decide on the details your reader needs if they can’t see the image.
Be concise. Write short phrases or complete sentences. Keep length under 125 characters if possible.
Always end with a period to ensure a pause in the screen reader before moving on.
You don’t have to include “picture of”, “image of”, or “portrait of”.
When describing people, do not make assumptions about their identities.
Context is important when writing alt text, if you’re using the same image in different contexts, then different alt text or a caption may be needed for each location.
Read the alt text out loud, it should give you a reasonably clear picture of the image being described.
If there’s already written content around the image that provides some context, you may only need a short alt text description.
Don’t be redundant. If you’ve already described the content of an image or photo in a caption, don’t repeat that description verbatim in the alt attribute; include abbreviated alternative text in the alt attribute so the users of screen readers know to what the image refers.
Any image that is also a link must have alt text and the text should tell the visitor where the link is taking them.
If the image contains text, the alt text should include the same text unless that text can be found in the content of the page near the image.
For in-depth, detailed images (like infographics, flow charts, organizational charts, maps, and illustrations), it’s alt text best practice to use several sentences that give an in-depth, detailed description. This is especially true if substantial parts of the image need to be understood in order to make sense of the content. However, if possible, please describe the image within the page.

An image does not need alt text

When it is strictly for decorative purposes and conveys no meaning.
If it has a caption that contains all the relevant information needed in the alt text.
When the content that the image conveys is expressed in text surrounding the image. This is mostly used with complex images or images with a lot of text.

Decorative images are images that provide no information and are used purely for aesthetic purposes. These images do not need alternative text. In the UWB CMS, leaving the Alt Text field blank will automatically mark an image as being decorative and will instruct a screen reader to skip it.

A few common types of decorative images include:

divider lines that help break up content (The WordPress “Separator” block).
images used to provide a mood, feeling, or style.
background images used in WordPress components.

A general rule: If you’re not sure whether an image needs alt text, add it. It’s better to err on the side of caution and inclusion.

Additional reading

Industry resources

https://www.csun.edu/universal-design-center/best-practices-accessible-images
https://www.w3.org/WAI/tutorials/images/decision-tree/
https://www.deque.com/blog/great-alt-text-introduction/
https://webaim.org/techniques/alttext/
https://help.siteimprove.com/support/solutions/articles/80000863904-accessibility-image-alt-text-best-practices

Alt text information from various schools and universities

https://usability.yale.edu/web-accessibility/articles/images
https://www.med.unc.edu/webguide/accessibility/alt-text/
https://accessibility.psu.edu/images/imageshtml/
https://www.perkins.org/resource/how-write-alt-text-and-image-descriptions-visually-impaired/

Examples

Alt Text

Alt (alternative) text best practices

How to write alt text for images

An image does not need alt text

Additional reading

Industry resources

Alt text information from various schools and universities

Examples

Complex Images

Charts

Flowcharts

Org Chart

By image type

Social Media

Inclusivity