Making content accessible: Guidelines for MITL staff: 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.

Decorative images

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

One example of a decorative image is an image of an apple on books with text about teachers and education. The apple and books do not add additional information to the page, and a user who could not see this image would not miss any contextual information.

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.

Informative images

An informative image provides additional context to the content. For example, an infographic is informative. If you're not sure if your image is informative, remove the image and evaluate if any meaning is lost by removing the image. If you're still unsure, assume your image is informative.

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