Images

Image Considerations

Key ways to make your images accessible:

• All non-decorative images require alternative text (alt text)
• Images that are contextual, rather than just illustrative, should include a caption to explain context
  • 12.8px text for image captions
• Images should have a strong color contrast or gray-scale ratio

Alt Text

Every non-decorative image must be accompanied by a written description known as alternative text. Alt text is a description in the HTML that is read aloud to visually impared users on a screen reader. Write alt text as if you were relaying the visual scene of the image to someone over the phone. Tell them what you see, concisely.

• Write to 125 characters or less
• Avoid filler words like “this is a photo of”
• If the image is primarily text (e.g. a copy overlay) that text should be used as the alt text
• If an image is used to guide the reader (e.g. a compass) the alt text should guide the user in the same direction

Alt Text for Social Media

You can add alt text to social media posts using each platform’s edit or advance settings feature.

• Instagram and alt text
• Twitter and alt text
• Facebook and alt text
• Linkedin and alt text

Caption tip: Images that are complex or require additional context should include captions. While alt text describes the image, captions add context.

Alt Text Examples

GOOD:

Royce Hall at night as the facade is lit by a light show that depicts health and medical professionals.

BAD:

Royce Hall at night

GOOD:

A female student holds a bowl of salad and smiles into the camera.

BAD:

A student holding food.

GOOD:

A three image collage of a Nobel Prize ceremony, a dancer performing on stage and Jackie Robinson playing baseball.

BAD:

A three image collage of different Bruins.