The WordPress media library, and the alt text description for the photo of two cats.
ALT Text Basics
Alt text is a textual depiction of media content, such that your website can be understood when visual components are not viewable by the visitor.
Alt text displays when the image is not visibile, as is the case for those who access the internet via screen readers, but also when a slow connection won’t allow images to load, etc. Adding ALT text to your images is an important practice, and it can even help with search engine optimization (SEO) efforts.
 Three Important Functions of Alt Text
Website Accessibility
Access to the internet is important for a huge majority of human activities, and many people use screen readers to access content. These devices read descriptions of visual content for users with visual disabilities. Consider how much of the internet is visual, and imagine what it would be like if you were unable to understand the images and graphic elements of a site. Including alt text in your images is just one aspect of website accessibility.
Text placeholder when images are slow to load or fail to load
If you’ve ever accessed the web in a place with poor connection, then you’ll have seen a broken image icon, and often a visual description of that missing image. Those descriptions are added manually by the site creator, and greatly help in making the site functional, even when the images aren’t loading.
SEO
Using alt text with your images helps with Google rankings. First, simply having the alt text matters to search engines, but also, descriptions can help by giving Google and other search engines a better idea of what your content is about.
In the example of the kittens above, I could easily have written “two cute kittens on a beige background” in order to meet the accessibility requirements of the alt text. However, if the article were about Maine Coon kittens, then for SEO purposes, it is better to write,” two Maine Coon kittens on a beige backdrop.” THAT being said, stuffing your alt text with unnecessary keywords runs the risk of ruining accessibility, and won’t fool the search engines if the description does serve the image.
How to Write Alt Text
Length
The alt text needs to be long enough to give the site visitor a good idea of its content without getting into unnessesary details. Many recommendations are for a description of no longer than 125 characters.
Write out text in image
If an image contains text that is key to understanding the purpose of the image, make sure to write out that text in the description. Use proper grammar and spelling as well.
What to describe
When composing image descriptions, it may seem difficult to decide what to include. Here are features that can be included in image descriptions- write about these when applicable:
- Image style (painting, graph)
- Colors
- Names of people (if relevant to the meaning of the image)
- Emotions, if relevant
- Surroundings
What to leave out
- There is no need to say “image of” or “picture of” in front of your descriptions, as that designation is already included as part of the screen reader text.
- Obvious details (such as the cats having two ears)
- Details that are not the point of the picture
Images Used as Links
If an image is being used as a clickable link to other content, the alt text should explain what that link will do. An icon of a car, for instance, if used as a link, would not say “car icon” but instead would say “link to Cars for Sale page.”
When Not to Use Alt Text
If an image is simply a place-holder, such as a pattern or decorative element, then there is no need for alt text.
Wrapping Up
I hope this article has helped to clarify some of the confusion around alt text. If you’re not sure whether or how to include alt text on your image uploads in WordPress, The Web Accessibility Initiative has a great decision tree that helps clarify. And, as always, feel free to reach out with any questions! I’m happy to extend this article with clarifications or write a whole new one on the subject!
