Alternative text (alt text) for images and other media

When writing alternative text, the first question you should ask yourself is, "Should I write anything at all?"

What is alternative text?

Alternative text (also known as "alt text") provides a textual alternative for media items such as images, audio, and video, and for visually complex content such as tables, charts, and graphs. So, if an image does not load, for example, this is the text that will be displayed in its place. Additionally, this is the text that will be provided to assistive technologies, making it a vital part of accessibility for the site.  

What should I write for alt text?

If your media item contains pictures of text or other important information, you'll want use alt text to describe what you see and explain its importance. The alt text is a substitute for what you see in the image.

Because images in an image gallery are the purpose of the image gallery, all gallery images require descriptions as captions and/or alt text. However, in other cases, if an image is decorative, that is, the image doesn't add new or pertinent information, you probably won't want alt text. When adding an image or other media to the media library on your Stanford site, that's the equivalent of leaving the Alternative text field blank. When the page renders, it will render it as alt="" .

To learn more about writing alternate text, see Stanford's Office of Digital Accessibility concept guide.
Learn more about decorative images

People in images

When uploading profile and other images of people photos, if names are provided, it's preferred to put names in the caption to make that information available to all users. Otherwise, if alt text is needed, use the person's name in the alt text. When describing people, unless it’s explicitly provided, avoid the mentioning gender, age, and ethnicity.

Identify complex images and describe elsewhere

Alt text may not be enough. Complex images like infographics, graphs, charts, diagrams, illustrations, and maps require a two-part text alternative.

The first part is the short description to identify the image and, where appropriate, indicate the location of the long description. The second part is the long description – a textual representation of the essential information conveyed by the image. 

Learn to: 

• add transcripts or text alternatives for embedded media
• describe complex images

Think about using captions

If the information you want to convey would be useful for all users, consider using captions.

Alt text explains information in images for screen reader users. Captions describe images to help users relate them to surrounding text. 

-- From the Australian Government Style Manual

Rather than providing a detailed description of an image or other media in the alt text, limit the alt text to describing what you see. Then, provide your description of the image and how it relates to your message in a caption or in text visible elsewhere on the page. This allows all site visitors access to the same information.

Learn more about alt text versus captions

Add transcripts with audio files

If you embed audio files on your site, you are required to include a transcript. 

Including transcripts along with your embed in the body of a page is a great way of providing content for everyone. This is also fabulous for SEO purposes, as all this keyword-rich content is now searchable, and for people for whom English is not their primary language.

Review these tips from the Office of Digital Accessibility on using captions and transcripts before posting media to your website.

See a podcast and transcript example: Masterclass on Running a Family Business

Transcript Tips

1. Transcripts should include speaker information or any other informational cues appropriate to understanding the recording.
2. If the audio was scripted before production the script can be used as the transcript.

Learn to add transcripts or text alternatives for embedded media

To share or not to share?

Just as an image or other media on your Stanford site can be shared in several places on your site, the alt text is also shared.

Before adding existing media such as an image to a page, you’ll want to make sure the alt text matches its context. If the existing alt text does not match the image context, you can override the alt text for a particular display.

To see the alt text for an image or other media item

Hover over the image so that you see the media toolbar.

• Click on the eye icon
• This will bring up a field where you can override the alt text for that image
• Click the green checkmark to save.

Seeing the alt text through the Media Library

You can also check alt text via the Media Library

1. In the admin menu go to All Content > All Media > Media Library and search for your image
2. Click on the pencil icon to bring up the edit page for the image
   

On the edit page for the media item you can change the Name and Alternative text for the image. If it is already in use, a Drupal message will give the number of times the image is in use.

Important: On your Stanford Site if you want reuse an image, but need to write a different alt text, you must re-upload this image as a different media item.