Alternative text, or alt text, is the descriptive word or phrase read by screen readers in the place of an image, allowing its content and function to be conveyed to those with visual impairments. It also replaces an image when a browser doesn’t load, and it can help search engines identify an image’s content. In other words, alt text makes images accessible across devices and abilities.
When it comes to writing good alt text, context is everything. In certain cases, you will need more description than others, and some images won’t need alt text at all.
Take this photo of Clark Hall, for example:
On a page about the College of Arts & Sciences, you might use the alt text “Clark Hall” or “Clark Hall, home of the College of Arts & Sciences,” depending on the image’s function and whether that information was already conveyed in your main text.
If the page describes the building’s architecture, you might include additional details: “Cathedral glass in Clark Hall.”
In general, alt text should be concise, capturing the image’s purpose and most important details.
Decorative images like logos, lines, or photos don’t typically require alt text (logos are sometimes an exception depending on usage).
Captions vs. Alt Text
The caption field should be used for information about copyright or the photo (e.g., source, location, photographer, etc.).
When to Use Descriptions
Some images, like charts or graphs, are more complex and may require detailed descriptions. In this case, the alt text should be brief, describing only the most salient details, and a longer description would be provided in the description field. The screen reader will inform the user the description exists, and the user will decide whether he wants to hear the information
WebAIM offers great information about alt text, including examples of alt text tailored to context or to work with a caption. Search the site for “alt text,” or read the site’s most all-purpose alt text article.