This article was written by Michelle Weger.
Alt text: what it is, why it matters, and how to do it well
You already know that website accessibility is important.
One key component of website accessibility is “alt text.”
What is alt text?
“Alt text” is an abbreviation of “alternative text.” Essentially, it is words that describe an image in case that image cannot be seen: whether that is because the image fails to load, or because the user is viewing the page on a screen reader.
These words are built into the code of your website as a “tag” that can be read by Google’s robots and by assistive devices.
Why is alt text important?
Alt text is important for accessibility.
Users who are blind or visually impaired use screen readers to browse websites. These screen readers verbalize the image descriptions, so the user can get the same experience as a sighted person.
People with sensory or image processing issues can also find alt text helpful when viewing a website: they may choose not to view images, for example.
Alt text is important for SEO.
Although many previously believed that strategic alt-text could help a page to rank better for specific keywords, Google’s own Search Advocate John Mueller debunked that in a recorded question-and-answer session on March 18, 2022.
During the session, John indicated that alt-text primarily influenced image search rankings, not regular page rankings. So if you have specific images or infographics that you want to appear in an image search, the alt-text you use is important.
Although unconfirmed by Google itself, it is possible that an accessible website will result in users staying on your page longer, which can ultimately influence page rank positively.
When should you write alt text?
Should you write alt text for every image on your website?
Absolutely not.
Should you ignore alt text altogether?
Absolutely not.
So how do you know which images you should write alt text for?
Unfortunately, there is no hard and fast rule – it largely comes down to context.
Is the image decorative? (In other words, is the image completely irrelevant to understanding the text?)
Is the image redundant? (In other words, does the user get the same information somewhere else in the text – for example, on a menu where the dish is described beside the photo?)
If so, use a “null” code for alt text (in code, that looks like alt-text= “” ) Using this “null” code, rather than just ignoring the tag entirely, tells screen readers to actively skip the graphic.
Otherwise, you should consider writing alt text for the image.
How to write good alt-text
Writing good alt-text is about more than stuffing keywords and product names into an overly descriptive sentence. You are trying to give people who do not see the image an understanding of what is there and why it is important.
Be concise
Screen-readers often cut off alt-text at 125 characters – so anything beyond that won’t be verbalized to the user, and could result in some awkward phrases if you aren’t careful.
Give context
The context of the image should influence the description of it. In fact, this is one of the most important considerations when writing alt text that is often ignored.
Alt text for the same image would be different, depending on the context.
For example, consider the image below:
In an article about branding: used as an example of an image a “fun” brand might use, alt text would not necessarily be needed. The image is decorative, and there is likely a description in the text of what a “fun” brand style is.
In an article about dog training: “Great Dane puppy sits calmly in a bathtub full of balls.” The breed is relevant (as readers may be looking for training advice for their own breed). The “calm” descriptor is appropriate here, as are the balls, as they relate directly to what a successfully trained puppy looks like.
In an article about bathtubs: “Very large dog sits comfortably in the bathtub”. Here what is important is the size of the tub, and potentially the strength. Both are conveyed with this description.
Focusing on different attributes of the image depending on the context of the surrounding information is far more helpful than a straight description of what is visible.
Be careful with keywords
Don’t add keywords to every image on the page. If there is one image that is particularly representative of your keyword, work it into the description organically. (Or, if your keyword phrase is long, consider using parts of it.)
Since the alt text is only used for ranking images in an image search, stuffing in keywords won’t help the overall page rank.
Pay attention to icons and images as links
When images are used as “icons” that link to something, the alt text should describe the action that will occur, not what the actual image looks like.
For example, a downward pointing arrow icon is often used as a “download” symbol. The alt text for such an image would be: “Download PDF”. An image of the Facebook logo that links to your Facebook page would have an alt text of “Visit our Facebook page”.
Alt text is an important part of website accessibility. An accessible website ensures you are reaching more potential customers, and establishing your business as inclusive online the same way you are offline.
