Google Explains Alt Text for Logos and Buttons
In a Google Search Off the Record podcast, Google’s Lizzi Sassman and John Mueller discuss the best way to handle alt text for image-based logos and buttons.
There are best practices for adding alt attributes to logos and buttons.
The rules may seem a bit complicated at first but they are really simple to understand.
Getting alt attributes right is good for users and in the long run it’s good for profits.
Adding Alt Text to Functional Images
Lizzi Sassman started the discussion by defining functional images, images that have a functional purpose on the webpage.
He asks if the alt text should describe what the button does or what the image on the button is in the situation where a button is an icon.
Finally, he questions whether adding alt text to functional images like buttons serves an SEO purpose.
…The level of care we expend on the visual asset, we must 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 object, which can sometimes be a button.
As it is a graphic that also works as an object.
So should the alt text tell me what happens?
If you click on it, it will take you here?
It can be like an image of something, which then also works as a button.
And are you describing the function, or was it like, I don’t know… like an arrow picture?
And also, does it matter for SEO?
Yes. I think…
It could be like a logo.
For accessibility, that probably makes sense, to just do something around it.
But for SEO, people won’t look for the checkout button, or something like that.
Alt Text on Buttons is 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 alt text for these types of images is mainly for accessibility reasons.
Lizzi continued the discussion:
…But maybe they want for the logo, or 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 you say, “This is the logo for Google Search Central.”
Or like what the descriptive text would be.
It’s Googlebot in the logo, but is the most important thing to know about the image is the fact that it’s a logo?
Or what does the logo look like?
I guess from that angle, people are probably looking for the logo.
Like what is the logo for X company, maybe?
Yes. I mean, it goes back to that kind of approach that we’re trying to avoid.
What do you want to find?
Yes, but that is the most important question, I think, because it is a kind of commandment …
I can be taken down all these rabbit holes, so it’s kind of, I don’t know, prioritizing what things we should think about, because you don’t have to write all the things for these things, Maybe. “
The Proper Use of Alt Text in Logos and Buttons
The correct way to use alt text on images such as logos really depends on whether the image is a link or not a link.
If the logo image functions as a link back to the home page, it is correct to label that image with the function it has, so that a site visitor using a screen reader will inevitably see this logo is a link to the home page.
The official HTML standards-making body, The World Wide Web Consortium (W3C) has published an explanation of how to handle logos.
Logo Homepage Link
A logo that acts as a link to the home page should contain alt text that tells a screen reader user that the logo is a homepage link.
The W3C uses this code example:
The code above is for a logo that one can find 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 says, “W3C home” but it can be more descriptive if you like.
Logo and Text Homepage Link
There are other types of logo links where there is an image logo and a text right next to it or below 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 the text together.
In that case, since the text describes the link function, it would be redundant to repeat the logo link function.
So for that case the best practice is to use null alt text.
This is the example provided by the W3C:
Note how the alt attribute for the image is coded:
img src="https://news.google.com/__i/rss/rd/articles/w3c.png" alt=""
An empty quote for alt text is called the null alt attribute (or null alt text). A screen reader will just skip it.
The reason a null alt text is good is because there is text describing what the link’s function is:
Alt Text for an Icon Link
Sometimes a link takes the form of an icon, with no text to explain what it does, for example an icon in the form of an envelope (representing an email or message) or a printer (indicating that the link enables a printers).
For this situation, it is 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 (start an email or print a webpage).
The W3C uses the printer icon example with the following code and alt text:
As you can see, the icon in the shape of a printer has the words “Print this page” as alt text. It tells what the icon does. That helps.
Alt Text for a Button
Similar to the icon example, the alt text for a button image should describe what the image does.
The W3C uses the example of a search box with a magnifying glass for a submit button.
A bad way to do this is to use alt text to describe that the image is a magnifying glass.
The best practice is to use alt text to describe what the image does.
This is the sample code that the W3C shows as an example:
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 go into the details of how to handle the different scenarios for logos and buttons.
However, John points out that there is no SEO value for alt text for buttons and logos, it’s for accessibility.
This is a best practice to properly serve webpages that work for users accessing webpages with screen readers.
As mentioned earlier, people who use screen readers can become customers or advocates for your business or website.
So it’s a good idea to use accessibility best practices.
Learn more about accessibility for buttons and logos at W3C
Combines 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:
Featured image by Shutterstock/Evgeny Atamanenko