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.