Google Explains Why to Add Alt Text for Logos & Buttons

In some Google Search Off the Record Podcasts, Google refers to the best way to discuss ALT text for logos or image-based buttons. There are some best practices for adding ALT attributes to logos and buttons. At first, the rules seem complicated, but they are simple to understand. It is great for users to know how to get the alt attributes right. 

The Proper Use of Alt Text on Logos and Buttons

The suitable way to use ALT text on images such as logos depends on if an image is a link or not. If the logo image function is considered as a link back to the home page, it is right to apply the image with the function, so that a site visitor using a screen reader couldn’t know the logo is a link to the homepage. 

The official HTML standard-making body, the World Wide Web Consortium (W3C), rolls out an explainer on how to deal with logos. 

Logo Homepage Link

A logo with the function of a home page link contains ALT text. This helps a screen reader user understand that the logo is the homepage link.

For example, the W3C of the code:  

• <a href=”https://www.w3.org/”>
• <img src=”w3c.png” alt=”W3C home”>
• </a>

This code is used for a logo that people see at the top of the page. It acts as a link back to the homepage. 

The example ALT text provided by the W3C says, “W3C home” but it is descriptive if you still want it. 

Logo and Text Homepage Link

There are different kinds of logo links where they have image logos, text right next to underneath, or both the image, and the text are coded with the same link code. 

In other words, it doesn’t have two links, like one link for a logo and one link for a text. It is one link for the logo and text together. In this case, because the text illustrates the function of the link, it is repetitive to repeat the logo link’s function. So the best way is to use a null alt text.

For example: 

• <a href=”https://www.w3.org/”>
• <img src=”w3c.png” alt=””> W3C Home
• </a>

Note how the alt attribute is coded for an image:

• img src=”w3c.png” alt=””

The empty quotation for the ALT text is a nut alt attribute. A screen reader will skip.

Alt Text for an Icon Link

A link is in an icon form, with no text to explain what it illustrates. For example, an icon in an envelope form or a printer (which shows a link that activates a printer).

For this situation, it is a bad experience to describe what the image is (neither an envelope nor a printer).

The best way is to show what the image does (create an email and print a webpage)

For example, the W3C uses a printer icon with a code and ALT text: 

• <a href=”javascript:print()”>
• <img src=”print.png” alt=”Print this page”>
• </a>

As you see, the icon in the shape of the printer “Print this page” is the ALT Text. It is helpful and real. 

Alt Text for a Button

Similar to an example of the icon, the text for the button image describes what the image does. The W3C uses an example of a search box having a magnifying glass for a submit button. 

The bad way is to use ALT text for describing that the image is a magnifying glass. The best way is to apply the text to show what an image does. 

For example, it is a code that W3C shows: 

• <input type=”image” src=”searchbutton.png” alt=”Search”>

You can see the text for a search button is the word “Search” which describes the exact function of the button. 

To sum up, this is all the information EverRanks wants to share with users about Alt text. With this text, you can optimize and get a holistic view of the image. We are excited to see this tool improve the logos and buttons for users.