An explanation with examples of writing good alternate text.
If you read the post about what an alt tag or alt text is, then you may be wondering HOW to write good alt text to maximize its benefits.
The short answer is….it depends. It depends on the purpose of your site, its content, and the purpose of the image.
What is considered good alt text?
To know what good alt text is, we need to understand the purpose of alternate text. According to WebAim, “Alternative text is a textual substitute for non-text content in web pages.” Using this definition, alternate text, or alt text, is for any non-text content so it would apply to things other than just images. Photographs and images just happen to be the most prevalent use of alt text.
Good alt text is concise, accurate and equivalent in the information it provides the user, does NOT include “image of” (the screen reader automatically adds this when reading it out to the user), and is not redundant.
Let’s look at the image here. It is a hand drawn and then digitized caricature of yours truly done by our graphics intern, Kim Hall. There are several ways we could describe this image. If it is purely decorative and provides no additional information to the user, then we wouldn’t describe it at all. We would use “” in the alt text area. This tells screen readers that the image is purely decorative and holds no contextual value to the user.
But what if I used this image in a post explaining the importance of managed services and how they can prevent major headaches from the inevitable crash? Then this image holds some contextual value because it provides a visual description of the importance. So in this instance I might write “Hand drawn cartoon female with anxious look on her face sitting in front of a laptop that says “CRASH””. Saying that it is hand drawn helps the user visualize that it is a cartoon and not realistic or a photograph. The color of the image doesn’t really matter in the sense that it doesn’t help convey the meaning. If we added the additional details, like brown curly hair, light skinned, red jacket, etc; the alt text is no longer succinct or concise.
There are exceptions to every rule of course. NASA has become well known in the digital accessibility arena lately because of their efforts to improve the user experience for the visually impaired. They hired an advisor that specialized in creating alternate text for the release of new images take by the Webb telescope. Why? Because they believed that space should be experienced by everyone. Many of the descriptions would be considered too long. But when you have complex images, the length of the alt text becomes less important. What matters is that you are providing as close to the same experience to sited users and those with limited site.
Writing good alt text doesn’t have to be complicated. If you want some help with alt text and making your website more accessible, let us know. We’d love to help you make your site work for you.