Images on web pages provide not only visual appeal, but many times also convey important information. Alternative text, called alt text for short, improves accessibility by providing a text equivalent of the information intended by an image. The purpose of alt text is to describes the appearance and function of an image. Including alt text with your images ensures all individuals, regardless of visual ability, can engage with your content.
Alt text should be:
- Accurate: including spelling, grammar, and proper punctuation.
- Concise: using the fewest words possible while providing a meaningful description for the image.
- Equivalent: presenting the same content and/or function of the image.
Assistive technologies will announce when an object is an image, so including this information is redundant and not necessary.
Tips for writing effective alt text
- Describe the image as specifically as possible.
- Keep it short (around 125 characters or less).
- Don't include "image of," "picture of," "graphic of" etc.
- Don't include the file extension, .jpg or .png, .gif, etc.
- If the image medium is important (such as a photograph or oil painting), then include the medium in your alt text.
- Image buttons should have an alt attribute that describes the function of the button like, "search," "donate," “sign up,” etc.
The alt text will depend on the context and intention of the image. For the image below, the alt text could be "XPP Instrument Area Manager Daniel Stefanescu prepares LCLS instruments for beam and experiments in the Chemistry Lab on the historic Stanford University campus. "
There are times when images also serve a function, like a button for example. In these cases, the alt text should communicate the function and include the appropriate text from the image. For the button below, the alt text could be "Learn more about our research."
Illustrations, graphs, and charts
Illustrations, graphs, and charts should include alt text that describes the important, relevant information. Instead of repeating every single data point in a chart or graph, it may be more effective to summarize the overall meaning or intent of the graphic representation. Following the image, the key elements may be presented as text on the page for an individual to read and review.
For the graph below, the alt text could be "Graph depicting Stanford's path to reduced emissions from 2011 to 2021"
The text on the page could then identify the key elements as presented in the image, such as:
"Stanford's path to reduced emissions is demonstrated by the peak GHG emissions in 2011, to 2015 at 50% below peak with SESI going online, followed by 2016 and the first solar plant become available. In 2017 emissions were 68% below peak and attributed to on-campus rooftop solar. Projections indicate 2021 to be 80% below peak with a second solar plant becoming available."
For images that are intended as visual decoration only, alt text is not necessary since the image has no real content value. While there is still a need to have the "alt" attribute as part of HTML code, this can be a null value (e.g., alt="") as this indicates the image is purely decorative. This will prevent some assistive technologies from reading out the image "src" value as a fallback mechanism to provide some type of information about the image.