Alt text for functional icons

Question

I have this situation on my webpage:

When you click on the "i" icon you will go to the "ushuaia.php" page, and when you click on the word "Ushuaia" you will go to the same "ushuaia.php" page.

But...

What about the alt text for the icon? It is better for SEO to include an empty alt text (alt="") or to include a text (like alt="Ushuaia"). I don´t want search engines to index the icon as "Ushuaia" because I use this icon on other pages.

Is the following lines good?

<a href="ushuaia.php">
<table><tr>
<td><img alt="" src="/information.png"></td>
<td>Ushuaia</td>
</tr></table>
</a>

(y prefer to use tables instead of div, but it is not the matter)

Answer 1

Yes, alt="" is the proper way.

Following the W3 recommendation, I'll quote the relevant part:

Decorative images: Provide a null text alternative (alt="") when the only purpose of an image is to add visual decoration to the page, rather than to convey information that is important to understanding the page.

https://www.w3.org/WAI/tutorials/images/

Answer 2

Outside of SEO, it would be more beneficial to leverage an alt tag of "information icon". This is an attempt to make your website more accessible, especially since this is a linked item and screen readers will read out the alt text to the user.

Leaving it blank might make it more confusing.

Answer 3

I think that you might have the wrong impression about alt text. What you have is an icon, not an image. Even if it's not technically an icon, it's still an icon.

No search engine is going to index this unless you're a stock-image site or something for a query like "free information icons".

While the alt property is used by search engines to better understand (to some extent) the content of the page, its true purpose is to assist people with impaired vision.

In your situation, I doubt this will result in any measurable SEO impact on your page.

However, an originally shot photo of Ushuaia with alt text describing what is shown in the photo, probably will.

What you should do here is set a relevant ARIA attribute; namely aria-describedby and aria-label

<button class="info-icon" aria-describedby="info-tooltip" aria-label="Information">
    &#9432;
</button>

If you think it's appropriate, you could combine that with a tooltip to create a nice, accessible, user experience for your information icon.

<div id="info-tooltip" class="tooltip" role="tooltip">
    This is additional information displayed on hover or focus.
</div>

If you would like to use an alt property, "information icon" is a suitable value.

Ushuaia looks beautiful, by the way :)