Google Explains Alt Text for Logos & Buttons


In a Google Search Off the Report podcast, Google’s Lizzi Sassman and John Mueller focus on one of the best ways to deal with alt textual content for logos and image-based buttons.

There are greatest practices for including alt attributes to logos and buttons.

The principles can appear a little bit sophisticated at first however they’re truly easy to grasp.

Getting the alt attributes proper is nice for customers and in the long term it’s nice for earnings.

Including Alt Textual content to Purposeful Photos

Lizzi Sassman begins the dialogue by making a reference to purposeful photos, photos which have a purposeful objective on the webpage.

She asks if the alt textual content ought to describe what the button does or what the picture on the button is within the scenario through which a button is an icon.

Lastly, she asks if there’s an search engine optimisation objective to including alt textual content to purposeful photos like buttons.

“Lizzi Sassman:
…The extent of care through which we spend on the visible asset, we must also put the identical degree of power into the phrases that describe that asset as effectively. Which I feel is nice.

One other class of photos is just like the purposeful factor, which typically might be a button.

Prefer it’s a graphic that additionally capabilities as one thing.

So ought to the alt textual content inform me what’s about to occur?

For those who click on this, then it’s going to take you right here?

It might be like a picture of one thing, that then additionally capabilities as a button.

And do you describe the operate, or like additionally it was, I don’t know… like an arrow image?

And in addition, does it matter for search engine optimisation?

John Mueller:
Yeah. I feel…

Lizzi Sassman:
It might be like a brand.

John Mueller:
For accessibility, that in all probability is sensible, to only do one thing round that.

However for search engine optimisation, individuals are not going to seek for the checkout button, or one thing like that.”

Alt Textual content on Buttons Are For Accessibility Not search engine optimisation

John Mueller makes it clear that there isn’t a search engine optimisation objective for including alt textual content to buttons.

However he additionally noticed that the alt textual content for these sorts of photos are primarily for accessibility causes.

Lizzi continued the dialogue:

“Lizzi Sassman:
…However possibly they’d for the emblem, or one thing like the emblem. Whenever you click on it, it takes you to the homepage, or one thing.

But it surely’s additionally, “Oh, it’s a brand.”

So do you say, “That is the emblem for Google Search Central.”

John Mueller:

Lizzi Sassman:
Or like what could be descriptive textual content.

It’s Googlebot within the brand, however is the factor that’s most necessary to know concerning the picture the truth that it’s a brand?

Or what the emblem appears to be like like?

I assume from that angle, individuals are in all probability searching for the emblem.

John Mueller:

Lizzi Sassman:

Like what’s the brand for X firm, possibly?

John Mueller:
Yeah. I imply it goes again to form of that technique that we’re making an attempt to keep away from.

What do you wish to be discovered for?

Lizzi Sassman:
Yeah, however that’s an important query, I assume, as a result of then it kind of steers…

I can get carried away with all these rabbit holes, so it kind of, I don’t know, prioritizes what are the issues that we ought to be considering of, since you don’t essentially want to write down all of the issues for this stuff, I assume.”

The Correct Use of Alt Textual content on Logos and Buttons

The proper approach to make use of alt textual content on photos like logos truly is dependent upon if the picture is a hyperlink or not a hyperlink.

If the emblem picture capabilities as a hyperlink again to the house web page then it’s right to label that picture with the operate that it has, so {that a} web site customer utilizing a display reader can no that this brand is a hyperlink to the house web page.

The official HTML normal making physique, The World Large Net Consortium (W3C) publishes an explainer on how you can deal with logos.

Brand Homepage Hyperlink

A brand that capabilities as a house web page hyperlink ought to include alt textual content that tells a display reader person that the emblem is a homepage hyperlink.

The W3C makes use of this instance of the code:

<a href="">
<img src="" alt="W3C dwelling">

The above code is for a brand that one would possibly encounter on the high of the web page that additionally serves as a hyperlink again to the house web page.

The instance alt textual content supplied by the W3C merely says, “W3C dwelling” but it surely might be extra descriptive if you’d like.

Brand and Textual content Homepage Hyperlink

There are other forms of brand hyperlinks the place there may be a picture brand and a textual content proper subsequent to it or beneath it and each the picture and the textual content are coded throughout the identical hyperlink code.

In different phrases, there aren’t two hyperlinks comparable to one hyperlink for the emblem and one hyperlink for the textual content, it’s only one hyperlink for each the emblem and textual content collectively.

In that case, as a result of the textual content describes the operate of the hyperlink, it might be repetitive to repeat the operate of the emblem hyperlink.

So for that case one of the best observe is to make use of a null alt textual content.

That is the instance that the W3C offers:

<a href="">
<img src="" alt=""> W3C House

Observe how the alt attribute is coded for the picture:

img src="" alt=""

The empty citation marks for the alt textual content is named a null alt attribute (or null alt textual content). A display reader will merely skip it.

The rationale a null alt textual content is nice is as a result of there may be textual content that describes what the hyperlink operate is:

W3C House

Alt Textual content for an Icon Hyperlink

Generally a hyperlink is within the type of an icon, with no textual content to clarify what it does, for instance an icon within the type of an envelope (representing electronic mail or message) or a printer (which signifies the hyperlink prompts a printer).

For this example it’s a nasty observe to explain what the picture is (like an envelope or a printer).

The most effective observe is to explain what the picture does (provoke an electronic mail or print a webpage).

The W3C makes use of the instance of a printer icon with the next code and alt textual content:

<a href="">
<img src="print.png" alt="Print this web page">

As you possibly can see, the icon within the form of a printer has the phrases “Print this web page” because the alt textual content. It tells what the icon does. That’s useful.

Alt Textual content for a Button

Just like the instance of the icon, the alt textual content for a button picture ought to describe what the picture does.

The W3C makes use of the instance of a search field that has a magnifying glass for a submit button.

The dangerous approach to do it’s to make use of the alt textual content to explain that the picture is a magnifying glass.

The most effective observe is to make use of the alt textual content to explain what the picture does.

That is the instance code that the W3C exhibits for instance:

<enter kind="picture" src="" alt="Search">

As you possibly can see, the alt textual content for the search button is the phrase, “Search” which describes what the operate of the button is.

Alt Textual content for Buttons and Logos

Lizzi and John didn’t get into the small print of how you can deal with the totally different situations for logos and buttons.

Nevertheless John did level out that there isn’t a search engine optimisation worth for alt textual content for buttons and logos, it’s for accessibility.

It’s a greatest observe to appropriately serve webpages which might be purposeful for customers that entry webpages with display readers.

As talked about earlier, individuals who use display readers will be clients or advocates for your online business or web site.

So it’s good for the underside line to make use of accessibility greatest practices.


Be taught extra about accessibility for buttons and logos on the W3C

Purposeful Photos

Combining adjoining picture and textual content hyperlinks for a similar useful resource

Utilizing alt attributes on photos used as submit buttons

Take heed to the Search Off the Report Podcast on the 15:57 minute mark:

Featured picture by Shutterstock/Evgeny Atamanenko


Scroll to Top