Making content accessible: Accessible images

Images are not accessible. You need to add in alt text to make them accessible. 

Alternative text (also referred to as alt text), is a short description of an informative image, usually about 150 characters. These are helpful for user with vision impairment, but it is also useful if a browser doesn't load the image. 

Why it matters:

• The text is added to the image so users who cannot see the image can understand its importance
• If the user cannot see the image they can still get what they need to know from the image
• Screen readers will read the text aloud to the user

Sometimes your description will need to be longer than 150 characters. In that case, you may need to add this information in a caption or to the text of your document.

Good alt text guidelines

• Do not use "image of" or "photo of"
• Keep it short, like a tweet
• Provide context

Resources

• Write helpful alt text to describe images - from Harvard
• Alt text for infographics

There are two types of images: informative and decorative.

Informative images

An informative image provides additional context or information to the content. For example, an infographic is informative.

However, there are many images you may think are not informative, but are providing some kind of context. For example, if you visited a dentist’s website and there were people smiling at the top of the page, though that information is not necessary, it is conveying an ambiance. It’s trying to show you they are a friendly place and that their clients have good teeth.

This guideline is in place because many users with low vision can physically see there are images on a page, but cannot tell what they are. Without alt text, they can worry that they have missed helpful information or context.

If you're not sure if your image is informative, it is best to assume your image is informative.

Decorative images

A decorative image does not add any additional information or context to the accompanying text.

Decorative images do not need any accompanying text or alt text. However, if your image is decorative, consider whether you really need to include it.

Why you include an image on a page will change based on the page. Consider the image below. What your page is about will change why you included the image and what the viewer might take away from it. Below the image are examples of how the alt text for the image could change.

Alt text without context:

Two young children playing with blocks and other toys

Alt text on a page about the importance of early childhood friendships:

Two preschool children sharing toys and playing together

Alt text on a page about safe playing materials for children:

Two young children playing with wooden blocks and animals

The above types are not the only types of images you may want to include in your content. Please reach out to the UXWS team if you have additional types of images (including data representations) not covered in this document and want to know how to make them accessible.

• Informative images - from W3C
• Alt text decision tree - from W3C