Google’s John Mueller and Lizzi Sassman discuss creating image alt text that’s good for those using screen readers, briefly touching on what to do about decorative images and how it’s tricky to write alt text that finds the balance between SEO and accessibility.
Alt Text is For Accessibility & SEO?
According to the World Wide Web Consortium (commonly referred to as the W3C), the official HTML standards body, the purpose of the image alt text is to make images understandable to site visitors who cannot view image content and are using screen readers.
Alt text also helps those using screen readers understand the purpose of the image or become aware of text that is in the image.
The W3C also says that alt text has an SEO purpose as well.
“…if you want your website to be indexed as well as it deserves, use the alt attribute to make sure that they won’t miss important sections of your pages.”
The purpose of alt text can be said to be for making images understandable and accessible to those who cannot see the image, which includes search engine bots.
It takes a surprising amount of thought to get the alt text right. The W3C published an alt text tutorial for seven different kinds of image contexts.
Don’t Say an Image is an Image
While SEO might require that the alt text of a screenshot say that the image is a screenshot, for accessibility purposes it’s considered redundant (and annoying to write that an image is an image).
Lizz Sassman and John Mueller discuss handling this problem:
“So one of the best practices is not to start every image with a screenshot of, a screenshot of, because then, it just becomes repetitive.
We already are aware that it’s an image. You don’t need to say, ‘It’s an image of’ and then the thing.
Just launch in with whatever the description is. And it also doesn’t necessarily need to be a full sentence, I think.
John Mueller: Yeah.
Lizzi Sassman: It could be just a descriptive phrase. It doesn’t need to be a full thought, I think.”
Balancing SEO Needs With Accessibility
John Mueller introduces the topic of the tension between what traditional SEO practice is with regard to image alt text and accessibility requirements.
Mueller continued:
“John Mueller: Yeah, yeah. I think that makes a lot of sense.
I mean, the tricky part is probably balancing the two sides. The kind of accessibility aspect. What people want from alt text for accessibility.
And then the SEO aspect where you would do some things like… traditionally, you would do some things that might be slightly different.
Like you would list a bunch of synonyms, for example.
Like, “Oh, this a beach at the ocean with waves.”
And that’s the kind of stuff where sometimes it makes sense to do that in the alt text for SEO reasons, but probably not for accessibility reasons.
And finding that balance is something that’s sometimes a bit tricky.
So it’s good to watch out for that.”
Something is Better than Nothing
An important point about image alt text is that it’s a bad practice to leave the alt text field blank.
One reason it’s a poor practice is because screen readers may start reading the image file names, which is a negative user experience.
Another reason is because it deprives visitors using screen readers from receiving important information that may be in some of the images.
Then there are SEO considerations with regard to alt text and getting images properly indexed and found in search.
John Mueller recommends adding something into the alt text because something is better than nothing.
He suggested:
“John Mueller: But if you’re just adding alt text for the first time, then sometimes, even any alt text is better than nothing.
Lizzi Sassman: Like nothing.
At least starting with something, but then, what can you do to even improve on top of that.”
Alt Text and Decorative Images
Lizzi Sassman next discussed what to do about decorative images.
The first problem is distinguishing between whether an image truly is decorative or whether it’s conceptual and contributes to the meaning of the content, in which case, the challenge is how to communicate a conceptual image.
Lizzi commented:
“And that’s definitely something that… I think I struggle with more, like the more you get into decorative images, or things that are not…
I don’t know… the search result thing is fairly straightforward.
But once it gets into things like, “Oh, this is a concept,” or like, “It’s decorative,” so it doesn’t…
There’s some places that say, ‘Oh, you don’t need to put alt text in a decorative image.’
Like if it’s purely there just for aesthetics, then it’s better to just leave the alt text empty.
But on the other hand, why would I have put it there? There was a reason to put it there.
So shouldn’t we have something that fills that gap for the experience of someone who is not seeing the image?
Shouldn’t we have a replacement thing? It was serving a purpose.
We put it there for a reason, like what would be an alternate experience to still get that information across, I guess?
So for like Googlebot, like doing stuff.
Sometimes we have these I guess what would be categorized as a decorative image.
Where it’s like Googlebot is exploring the web, or something.
Or like it’s conveying some kind of idea, and should the alt text focus on the idea? Or like, ‘Oh, it’s Googlebot with some friends.’
Or it’s Googlebot… like putting spam into a computer, and then, being happy at the end.
Like describing what is happening in there, so that you still sort of get the idea of what was meant to be there is, I guess, one of the things that… yeah, it confuses me.
John Mueller: Yeah. I mean from a personal point of view, I would definitely add alt text to these kind of images, because they’re kind of unique and special.
It’s not… I don’t know… a floral background, or something like that.
It’s actually something where people spent a lot of time creating that image.
And it’s also something that people might want to find in the search results.
So if you’re searching for Googlebot, like we spend so much time creating all of these images, it will be nice to be able to be found for them as well.”
The W3C has published an entire page of documentation about how to handle the alt text for decorative images.
This is the official W3C recommendation:
“Decorative images don’t add information to the content of a page.
For example, the information provided by the image might already be given using adjacent text, or the image might be included to make the website more visually attractive.
In these cases, a null (empty) alt text should be provided (alt=””) so that they can be ignored by assistive technologies, such as screen readers.
Text values for these types of images would add audible clutter to screen reader output or could distract users if the topic is different from that in adjacent text.”
The W3C also suggests four ways to identify a decorative images.
Four Tests For Whether an Image is Decorative:
- Image is used for styling the document (the look and feel)
- If it is an image that is supplementary to link text
- Does not contribute information to the text content
- The image is described by the surrounding text content
Ultimately it’s up to the author to decide what’s best for image alt text.
As Google said, something is better than nothing. So if the image doesn’t contribute information then just use the null value for alt text, which is coded with alt=””
Citation
Listen to this portion of the Google Podcast at the 15:17 minute mark:
Featured image by Shutterstock/Roman Samborskyi