Alternative text, or alt text, is a short description of an image that users will not typically see unless they use an assistive technology or the image does not load on the page. Every image should have some form of alternative text, so it is important to know how to write an accurate description that isn’t excessively descriptive.
Alternative text is not the same thing as a caption. If you have an image with a caption on it, you should remove the caption from the image and provide the caption through Drupal or HTML.
Writing Good Alternative Text
Good alternative text describes the content and concisely conveys the functionality of an image without providing superfluous details. The alternative text examples for the following image show the differences between too little, too much and just enough information.
Bad alternative text: Student
Bad alternative text: Female student with long black hair standing in the Case Western Reserve University on-campus student bookstore reading a calculus textbook with a copper spring on the cover.
Good alternative text: Female student reading a calculus textbook in the Case Western Reserve University bookstore.
The first example doesn't describe much about the image, where as the second example excessively describes the image and detracts from the key information.
The good example adds to the first description by providing the information necessary to understand the image without providing more detail than needed. If you use either of the bad alternative text examples, the listener will either have questions or miss the primary purpose of the image.
In two of the alternative text examples, we included “Case Western Reserve University.” Adding the university name can help you improve search engine optimization—which makes your media and content appear higher in search engines like Google—because many people will use the university name when searching for your content.
Alt Text Tips
Alternative text should be:
- Concise and accurate—ideally not more than 125 characters
- Different from a caption; it shouldn't contain copyright or other information to which a seeing audience should also have access
Alt text is not required on purely decorative images—that is, those that provide no additional context to a page, such as a stock photo of flowers on campus. For those images, you should insert an empty alt tag ("") so a screen reader knows to skip this image completely.
However, most images provide some value to a page (and if it doesn't, why is it on your page in the first place)? We strongly recommend alt text on all images.
Another place in which an empty alt tag ("") could be used is when an image is overly complex. This doesn't mean you skip the description completely—but rather, you should use a blank alt tag and write out in the copy what the image conveys. For example, if it's an infographic with statistics, this information needs to be conveyed within the body of your webpage, email or document; the image then simply serves as an additional element that may be helpful but isn't necessary. If alt text is used in this instance, it should be concise and not redundant with the body content.
Having the content spelled out on your page isn't just good for accessibility, though; it also helps with search engine optimization (search engines can't read your images!) as well as usability (think of how it might look on a small mobile device). Remember, if your image doesn't load on someone's computer or phone, they're missing your content completely—unless it's spelled out on the page or within your alt text. So make sure this critical information is available.
Images with Text
Images should typically be void of text, but if an image requires a text overlay, you must provide the text word-for-word and describe the text’s function in the image’s alternative text or within the body copy of the page/document.