The function of alternative (alt) text is to provide a text substitute for images displayed in a web page or a document. Proper alternative text will explain the context and function of the image. The following are several reasons why you would include alternative text.
- Alternative text is read aloud to users of screen readers in place of the images. Users with vision or cognitive disabilities benefit from the use of proper alternative text.
- If an image fails to load on a web page or the user has blocked images, the browser will display the alternative text in place of the image.
- Search engines use alternative text and factor to assess a web page's purpose and content.
How to write good alt text
- Alt text should be included in all non-decorative images.
- Keep alt text short and descriptive. Alt text should be roughly 125 characters maximum.
- Alt text should accurately describe the exact contents in the image. Do not fabricate the contents of the image.
- Avoid redundancy by not including the same information as text near the image.
- Don’t include “image of” or “photo of”.
- Leave alt text blank if the image is decorative and offers no value to the context of the web page or document.
Examples of context in alt text
The following example is taken from an article on alt text from Harvard Digital Accessibility Service using an image of Harvard stadium:
Image with no context:
- Alt text: "A mostly empty stadium."
Image on a page about recent turnout for track tryouts:
- Alt text: "Harvard Stadium with two lone runners bounding up the steps."
Image on page about renovation projects:
- Alt text: "Harvard Stadium with cracked concrete pillars."
Please visit this article from Supercool Design that contains more examples of good and bad alternative text.
Other Example: Photo of a Person
Writing Alt Text for a Headshot
Headshots are a common type of image shared digitally by the university. Make sure you write alt text that names the subject and describes what's happening for those who cannot see the headshots.
Say that it's a headshot.
Just by saying that the image is a headshot, you convey several things about the image and person in it: They are a professional, likely wearing business casual and almost certainly smiling. There is no need to explain any of these things in more detail for a headshot image.
Include the person's full name.
Even if the name is mentioned nearby, you must still communicate who is in the photo.
If the person is doing something in the photo, describe it.
If the subject of the headshot is holding something, performing an action or sitting in front of a background that communicates visual information, include that in your alt text.
Don't over-describe the person.
Things can get subjective and inaccurate quickly if you're trying to describe a person's gender, ethnicity, race, clothing, hair, etc. Leave these descriptions out of your alt text for individual people unless it truly communicates important information that cannot be accessed any other way for those who cannot see the photo.