Alternative Text (Alt-text)

Questions

  • What is alternative text (alt-text) and why does it matter?
  • Is alt-text required for images on Bowdoin webpages?
  • How do I add alt-text to an image in Cascade?
  • How do I write good alt-text?
  • How long should alt-text be?
  • Should I start alt-text with "image of" or "picture of"?
  • What alt-text should I use for a decorative image, or an image that is also a link?
  • What do I do about an image that contains text?

Environment

This article applies to Bowdoin website editors and content contributors who add images to Bowdoin webpages in Cascade CMS. It covers what alternative text is, why it is required, and how to write it well.

Resolution

What alt-text is and why it matters

Alternative text ("alt-text") is a short written description of an image. It is read aloud by screen readers so people who are blind or have low vision can understand the image, and it is displayed in place of the image if the image fails to load. Good alt-text also helps search engines understand your content.

Alt-text is required. Cascade requires an alt-text value whenever you add an image. Take a moment to write something meaningful rather than leaving a placeholder.

Screenshot of the required alt-text field for images uploaded to Cascade 8.

Writing great alt-text

  • Be descriptive and specific. Describe what is meaningful about the image in the context of the page.
  • Keep it concise. Aim for roughly 125 characters or fewer. If an image needs a longer explanation, put that in the surrounding text.
  • Don't start with "image of" or "picture of." Screen readers already announce that the element is an image.
  • Watch for repetition. If a caption already describes the image, the alt-text does not need to repeat it word for word.
  • Images that contain text: include the words shown in the image in your alt-text.
  • Functional images (an image that is also a link or button): describe where the link goes or what the button does, not just what the image looks like.
  • Decorative images that add no information can use empty alt-text so screen readers skip them.

Example

Compare a vague description with a descriptive one for the same photo. Weak alt-text such as "students" tells a screen reader user almost nothing. A better description reads:

Three people standing at a table, closely examining and discussing a map or diagram.

Describe the action and setting that matter for your page, as in these examples:

The cast of the theater production Cole takes a bow.

Performers in 1920s costumes stand in a row on stage holding hands, bowing under a sign that reads "Cole."

Additional Help

If you need further assistance, you have several options:

  • Bowdoin Bot: Chat with Bowdoin Bot directly from any KB page for instant answers.
  • Phone: Call the Bowdoin College Service Desk at (207) 725-3030.
  • In person: Visit the Tech Hub in Smith Union during business hours.
  • Submit a ticket: Request assistance through the Service Catalog.

Additional Resources

Print Article

Related Articles (5)

Accessibility Options in Instagram
How to make Bowdoin Instagram content accessible: add your own alternative text on new posts (Advanced Settings > Accessibility > Write Alt Text) and on existing posts (the three-dot menu > Add Alt Text), since Instagram's automatic alt-text is not always accurate; and caption videos, remembering that Instagram supports only open (burned-in) captions. Lists captioning software by platform and links the DCMP Captioning Key. For Bowdoin staff managing Instagram accounts.
Best Practices for Accessible Content in Social Media
Best practices for making Bowdoin social media posts accessible: add alternative text to images, caption videos, place hashtags and mentions at the end of a post and write multi-word hashtags in CamelCase (#BowdoinCollege), use meaningful link text, use emojis sparingly because screen readers read each one aloud, and keep good color contrast. For Bowdoin staff and departments managing social media accounts.
Captions and Transcripts
Bowdoin's captioning policy (effective July 1, 2020) and the tools for meeting it: video should be captioned to at least 99% accuracy and audio-only content should have a transcript. Covers editing YouTube auto-captions, captioning Panopto videos (contact Paul Benham), professional captioning through Rev (contact Juli Haugen, ~5 business days), and transcribing Zoom cloud recordings. For Bowdoin website editors and content publishers.
Color and Color Contrast
How to use color accessibly on Bowdoin webpages: never rely on color alone to convey information, and ensure text has enough contrast with its background (at least 4.5:1 for normal text and 3:1 for large text). Includes a good-versus-poor contrast example, tips for text over images in Cascade, and links to the WebAIM and Siteimprove contrast checkers. For Bowdoin website editors.
Creating Accessible Links
How to write accessible link text on Bowdoin webpages. Explains why screen reader users navigate links out of context, so generic phrases like "click here" and "read more" should be avoided in favor of link text that describes the destination, and why a raw URL makes poor link text. Includes before-and-after examples. For Bowdoin website editors.