In a Google Search Off the Record podcast, Google’s Lizzi Sassman and John Mueller discuss the best way to handle alt text for logos and image-based buttons.
There are best practices for adding alt attributes to logos and buttons.
The rules can seem a little complicated at first but they’re actually simple to understand.
Getting the alt attributes right is good for users and in the long run it’s great for earnings.
Adding Alt Text to Functional Images
Lizzi Sassman starts the discussion by making a reference to functional images, images that have a functional purpose on the webpage.
She asks if the alt text should describe what the button does or what the image on the button is in the situation in which a button is an icon.
Lastly, she asks if there’s an SEO purpose to adding alt text to functional images like buttons.
“Lizzi Sassman:
…The level of care in which we spend on the visual asset, we should also put the same level of energy into the words that describe that asset as well. Which I think is great.Another category of images is like the functional thing, which sometimes could be a button.
Like it’s a graphic that also functions as something.
So should the alt text tell me what’s about to happen?
If you click this, then it’s going to take you here?
It could be like an image of something, that then also functions as a button.
And do you describe the function, or like also it was, I don’t know… like an arrow picture?
And also, does it matter for SEO?
John Mueller:
Yeah. I think…Lizzi Sassman:
It could be like a logo.John Mueller:
For accessibility, that probably makes sense, to just do something around that.But for SEO, people are not going to search for the checkout button, or something like that.”
Alt Text on Buttons Are For Accessibility Not SEO
John Mueller makes it clear that there is no SEO purpose for adding alt text to buttons.
But he also observed that the alt text for these kinds of images are mainly for accessibility reasons.
Lizzi continued the discussion:
“Lizzi Sassman:
…But maybe they would for the logo, or something like the logo. When you click it, it takes you to the homepage, or something.But it’s also, “Oh, it’s a logo.”
So do you say, “This is the logo for Google Search Central.”
John Mueller:
Sure.Lizzi Sassman:
Or like what would be descriptive text.It’s Googlebot in the logo, but is the thing that’s most important to know about the image the fact that it’s a logo?
Or what the logo looks like?
I guess from that angle, people are probably looking for the logo.
John Mueller:
Yeah.Lizzi Sassman:
Like what is the logo for X company, maybe?
John Mueller:
Yeah. I mean it goes back to kind of that strategy that we’re trying to avoid.What do you want to be found for?
Lizzi Sassman:
Yeah, but that’s the most important question, I guess, because then it sort of steers…I can get carried away with all these rabbit holes, so it sort of, I don’t know, prioritizes what are the things that we should be thinking of, because you don’t necessarily need to write all the things for these things, I guess.”
The Proper Use of Alt Text on Logos and Buttons
The right way to use alt text on images like logos actually depends on if the image is a link or not a link.
If the logo image functions as a link back to the home page then it’s correct to label that image with the function that it has, so that a site visitor using a screen reader can no that this logo is a link to the home page.
The official HTML standard making body, The World Wide Web Consortium (W3C) publishes an explainer on how to handle logos.
Logo Homepage Link
A logo that functions as a home page link should contain alt text that tells a screen reader user that the logo is a homepage link.
The W3C uses this example of the code:
<a href="https://www.w3.org/"> <img src="w3c.png" alt="W3C home"> </a>
The above code is for a logo that one might encounter at the top of the page that also serves as a link back to the home page.
The example alt text provided by the W3C simply says, “W3C home” but it could be more descriptive if you want.
Logo and Text Homepage Link
There are other kinds of logo links where there is an image logo and a text right next to it or underneath it and both the image and the text are coded within the same link code.
In other words, there aren’t two links such as one link for the logo and one link for the text, it’s just one link for both the logo and text together.
In that case, because the text describes the function of the link, it would be repetitive to repeat the function of the logo link.
So for that case the best practice is to use a null alt text.
This is the example that the W3C provides:
<a href="https://www.w3.org/"> <img src="w3c.png" alt=""> W3C Home </a>
Note how the alt attribute is coded for the image:
img src="w3c.png" alt=""
The empty quotation marks for the alt text is called a null alt attribute (or null alt text). A screen reader will simply skip it.
The reason a null alt text is good is because there is text that describes what the link function is:
W3C Home
Alt Text for an Icon Link
Sometimes a link is in the form of an icon, with no text to explain what it does, for example an icon in the form of an envelope (representing email or message) or a printer (which indicates the link activates a printer).
For this situation it’s a bad practice to describe what the image is (like an envelope or a printer).
The best practice is to describe what the image does (initiate an email or print a webpage).
The W3C uses the example of a printer icon with the following code and alt text:
<a href="javascript:print()"> <img src="print.png" alt="Print this page"> </a>
As you can see, the icon in the shape of a printer has the words “Print this page” as the alt text. It tells what the icon does. That’s helpful.
Alt Text for a Button
Similar to the example of the icon, the alt text for a button image should describe what the image does.
The W3C uses the example of a search box that has a magnifying glass for a submit button.
The bad way to do it is to use the alt text to describe that the image is a magnifying glass.
The best practice is to use the alt text to describe what the image does.
This is the example code that the W3C shows as an example:
<input type="image" src="searchbutton.png" alt="Search">
As you can see, the alt text for the search button is the word, “Search” which describes what the function of the button is.
Alt Text for Buttons and Logos
Lizzi and John didn’t get into the details of how to handle the different scenarios for logos and buttons.
However John did point out that there is no SEO value for alt text for buttons and logos, it’s for accessibility.
It’s a best practice to appropriately serve webpages that are functional for users that access webpages with screen readers.
As mentioned earlier, people who use screen readers can be customers or advocates for your business or website.
So it’s good for the bottom line to use accessibility best practices.
Citations
Learn more about accessibility for buttons and logos at the W3C
Combining adjacent image and text links for the same resource
Using alt attributes on images used as submit buttons
Listen to the Search Off the Record Podcast at the 15:57 minute mark:
[embedded content]
Featured image by Shutterstock/Evgeny Atamanenko