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.

“Lizzi Sassman:
…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?

John Mueller:
Yes. I think…

Lizzy Sassman:
It could be like a logo.

John Mueller:
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:

“Lizzi Sassman:
…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.”

John Mueller:
Of course.

Lizzy Sassman:
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.

John Mueller:
Yes.

Lizzy Sassman:

Like what is the logo for X company, maybe?

John Mueller:
Yes. I mean, it goes back to that kind of approach that we’re trying to avoid.

What do you want to find?

Lizzy Sassman:
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:

 W3C Home

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:

W3C Home

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.

---

Citations

Learn more about accessibility for buttons and logos at W3C

Functional Images

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