How to Write Effective Alternative Text
Writing effective alternative text for images is like learning how to properly cite resources. It's challenging at first and may be a new skill, but with practice, you'll master it in no time. But, good news, you're already on the path to writing more effective alt text because you're reading this article! Kudos to you!
Alright, let's dig in. First, let's cover the basics.
What is alt text?
"Alternative text provides a textual alternative to non-text content in web pages."
WebAIM, Alternative Text
In layman's terms, if you're adding images to your LibGuides they should contain properly constructed alternative text conveying the meaning or content of that image.
Why should I add them?
- Screen Readers: For visually or cognitively-impaired users, the alternative text is read out loud by screen reader software.
- Mobile-Users/Slow Bandwidth: Not everyone has LTE or high-speed internet. For users who choose to disable images from loading on web pages due to bandwidth issues, the alternative text displays instead and provides context.
- Helps Your SEO: Properly-formatted alternative text provides "semantic meaning and description to images which can be read by search engines." - WebAIM, Alternative Text.
Now that you know the what and the why of alternative text, let's cover the how.
How do I add alt text to my LibGuides images?
There are loads of spots where images can appear in your LibGuides - from thumbnail images in your database assets, to gallery box images, to resource icons in your link assets. So, we won't cover all the places in LibGuides that contain alt text functionality.
Instead, keep an eye out for the alternative text field when you're adding or editing an image anywhere in your LibGuides system.
Bottom-line, every image you add must have the alternative attribute. Even if that image is given an empty or null value (e.g., alt=" "). Images without the alt attribute are inaccessible.
Are you adding value?
Something to consider is whether an image actually adds value to what you're writing.
- Why are you adding an image?
- Does it add to the content?
- Is it merely decorative? And if yes, why add it?
Remember, users with a variety of visual issues as well as mobile users often find too many images problematic. And for users who have inverted the contrast of a webpage or users who employ magnification, too many images can affect the readability of your copy.
So, when adding an image ask yourself, "Does it add value"?
The Importance of Context
Writing good alternative text sounds easier than it is. And context is everything. "Alternative text for one image may be vastly different based upon the context and surroundings of the image itself." - WebAIM, Alternative Text.
Not only can the exact same image on separate LibGuides pages have completely different alternative text, but two separate authors might use different alternative text for the same image. Why? Because writing alternative text is a matter of personal interpretation.
Alternative Text Rules
- Be accurate and equivalent in presenting the same content and function of the image.
- Be succinct. This means the correct content (if there is content) and function (if there is a function) of the image should be presented as concisely as is appropriate. Typically, no more than a few words are necessary, though in rare cases, a short sentence or two may be appropriate.
- Don't be redundant or provide the same information as text within the context of the image.
- Don't use the phrases "image of ..." or "graphic of ..." to describe the image. It's usually apparent to the user that it is an image. And if the image is conveying content, it is typically not necessary that the user knows that it is an image that is conveying the content, as opposed to text. If the fact that an image is a photograph or illustration, etc. is important content, it may be useful to include this in alternative text.
- Taken directly from WebAIM, Alternative Text
How do I determine when I should add alt text or when to leave the alt attribute empty?
Step one in determining the appropriate alternative text for an image depends upon whether the image presents content and if the image has a function.
- Function: Does the image contains a link? Is it a button? Is it an image map?
- If yes, then then image provides a function and should contain alternative text.
- If no, see content below.
- Content: Does the image present content? Is there text around the image that conveys that content?
- If the image presents content that is not communicated by text around the image, then you must add alternative text.
- If the image presents content that is communicated by text around the image, then you do not need to add alternative text. Create an empty/null alt attribute: Alt=" ".
- If the image does not present content and is considered decorative, then you do not need to add alternative text. Create an empty/null alt attribute: Alt=" ".
Let's Look at Some Examples
Can you identify which images need alt text and which ones don't?
Writing good alternative text can be a tricky endeavor. And every image and surrounding copy will need a judgment call on your part.
But, here are some Springy suggestions to get you started.
Tips for Alternative Text for Specific Types of Images
- Purely decorative image - If the image is purely decorative and the surrounding copy explains the image, then alt text is most likely not needed. (e.g. alt= " ")
- Images that are screenshots - If the image is a screenshot of a database or catalog, with annotations, it is strongly encouraged that you add descriptive copy around the image. Leave the alt text empty. (e.g. alt= " ")
- Images that contain copy - If your graphic contains copy, be sure to either add in descriptive copy around the image or repeat that copy in the alt text.
How do I create an empty/null alt tag?
Just to be clear, when we state that the alt text is not needed that does not mean that the alt attribute isn't needed. The HTML alt attribute should still be included, but with a null value.
Depending on the screen reader, it will either 'skip' over the image entirely or it will just say "image". Someone who is fully sighted would easily skip over a decorative image, therefore a null alt text value allows someone with a screen reader to accomplish the same thing.
To create an empty or null alt attribute, simply don't put anything in the alternative attribute field. Leave it completely blank.
This will automatically generate an empty null attribute.
FDLP Library
