In the Google Search Off the Record podcast, Lizzi Sassman and John Mueller of Google discuss the best way to handle alt text for logos and image-based buttons.

There are best practices for adding alternate attributes to logos and buttons.

The rules may seem a little complicated at first, but they are actually quite easy to understand.

Having alt text themes is good for users and is great in the long run for profit.

Add alt text to functional images

Lizzi Sassman begins the discussion by referring to functional images, images that have a functional purpose on a web page.

It asks if the alt text should describe what the button or the image on the button does in the case where the button is an icon.

Finally, I asked if there was an SEO purpose for adding alt text to functional images like buttons.

Lizzie Sussman:
…the level of attention we expend on the visible origin, we must put the same level of energy into the words that describe that origin as well. Which I think is awesome.

Another category of images is like a functional thing, which can sometimes be a button.

As if it was a drawing that also served as something.

Should the alt text tell me what’s going to happen?

If you click this it will take you here?

It can be like a picture of something, and then it also works as a button.

And does it describe the job, or as it were, I don’t know…like an arrow picture?

Also, does SEO matter?

John Mueller:
yes. I suspect…

Lizzie Sussman:
It can be like a logo.

John Mueller:
For accessibility, it probably makes sense, just to do something about it.

But for SEO, people are not going to search for the exit button, or something like that.”

Alt text on buttons is for accessibility, not SEO

John Mueller explains that there is no SEO purpose for adding alt text to buttons.

But he also notes that the alt text for these types of images is mainly due to accessibility reasons.

Lizzi continued the discussion:

Lizzie Sussman:
…but maybe they would prefer the logo, or something like that. When you click on it, it takes you to the home page, or something like that.

But it’s also, “Oh, it’s a slogan.”

So would you say, “This is the Google Search Center logo”.

John Mueller:
surely.

Lizzie Sussman:
Or like it would be descriptive text.

It’s the Googlebot in the logo, but is the most important thing to know about an image is the fact that it’s a logo?

Or what does the logo look like?

I think from this angle that people are probably looking for the logo.

John Mueller:
yes.

Lizzie Sussman:

Like what is the motto of X Corporation, perhaps?

John Mueller:
yes. I mean it goes back to some kind of that strategy that we’re trying to avoid.

What do you want to find for?

Lizzie Sussman:
Yes, but that’s the most important question, I think, because then it’s kind of a directive…

I can get busy with all these rabbit holes, so kind of, I don’t know, prioritizes things that we have to think about, because you don’t necessarily need to write down all the things for these things, I guess.”

Proper use of alt text in logos and buttons

The correct way to use alt text on images such as logos depends on whether the image is a link.

If the logo image acts as a link back to the home page, it is correct to name that image with the function it contains, so that a site visitor using a screen reader cannot be that banner a link to the home page.

The official HTML standards-making body, The World Wide Web Consortium (W3C) publishes an explanation of how to handle logos.

Logo Homepage Link

A banner that acts as a link to the home page must contain alt text that tells the screen reader user that the banner is the home page link.

W3C uses this example code:

<a href="https://www.w3.org/">
<img src="https://news.google.com/__i/rss/rd/articles/w3c.png" alt="W3C home">
</a>

The above code is for a banner one might encounter at the top of the page which also acts as a link back to the home page.

The alt text example provided by W3C simply says, “W3C home” but it can be more descriptive if you want.

Logo and text homepage link

There are other types of banner links where there is an image banner and text right next to or below it and both the image and text are encoded into the same link code.

In other words, there are no two links like one link to the logo and one link to the text, it is only one link each of the logo and text together.

In this case, since the text describes the link function, the iteration of the logo link function will be recursive.

So the best practice for this case is to use an empty alt text.

This is the example provided by the W3C:

<a href="https://www.w3.org/">
<img src="https://news.google.com/__i/rss/rd/articles/w3c.png" alt=""> W3C Home
</a>

Note how the alt text attribute of the image is coded:

img src="https://news.google.com/__i/rss/rd/articles/w3c.png" alt=""

Empty quotes for alt text are called an empty alt attribute (or empty alt text). The screen reader will simply skip it.

The reason why empty alt text is good is because there is text describing the function of the link:

W3C Home

Alt text for icon link

Sometimes the link is in the form of an icon, with no text to explain what it does, eg an icon in the form of an envelope (representing an email or message) or a printer (indicating that the link activates the printer).

In this situation, it is bad practice to describe the image (such as an envelope or a printer).

Best practice is to describe what the image does (start an email or print a web page).

The W3C uses an example printer code with the following code and alternate text:

<a href="https://news.google.com/__i/rss/rd/articles/javascript:print()">
<img src="print.png" alt="Print this page">
</a>

As you can see, the icon in the form of a printer has the words “Print this page” as alt text. It tells what the code does. This is useful.

Alt text for . button

Similar to the icon example, the alt text for the button image should describe what the image does.

The W3C uses an example of a search box with a magnifying glass for a Submit button.

The bad way to do this is to use alt text to describe that the image is a magnifying glass.

Best practice is to use alt text to describe what the image does.

This is the example code that W3C shows as an example:

<input type="image" src="https://news.google.com/__i/rss/rd/articles/searchbutton.png" alt="Search">

As you can see, the search button’s alt text is the word “Search” which describes the button’s functionality.

Alt text for buttons and logos

Lizzi and John haven’t gone into the details of how to handle the different scenarios for logos and buttons.

However, John pointed out that there is no SEO value for alt text for buttons and banners, it has to do with accessibility.

It is a best practice to provide web pages that function appropriately to users who access web pages using screen readers.

As mentioned earlier, people who use screen readers can be customers or advocates for your business or website.

So it’s a good idea to make use of accessibility best practices.


quotes

Learn more about accessibility for buttons and logos in W3C

Functional Images

Combine adjacent image and text links to the same resource

Use alt text themes on images used as submit buttons

Listen to the Search Off the Record Podcast at 15:57 minutes:

Featured image by Shutterstock / Evgeny Atamanenko

Leave a Reply