Should the alt attribute show up when hovering on the image?

I also had that problem - I added the alt attribute but I can’t see any text when I hover over the image.

1 Like

The alt attribute is not meant to be visible unless there’s an issue loading the image.

The alt attribute also serves the following purposes: (click here)
  • If an image fails to load on a web page, a user can mouse over the area originally intended for the image and read a brief description of the image. This is made possible by the description you provide in the alt attribute.
  • Visually impaired users often browse the web with the aid of screen reading software. When you include the alt attribute, the screen reading software can read the image’s description out loud to the visually impaired user.
  • The alt attribute also plays a role in Search Engine Optimization (SEO), because search engines cannot “see” the images on websites as they crawl the internet. Having descriptive alt attributes can improve the ranking of your site.

Learn more:

9 Likes

The only browser to show the tooltip (for alt) when hovering was IE. Whether EDGE does, or not one cannot say. If you want a tooltip on hover, then include a title attribute.

alt and title are not the same thing, and not interchangeable. Search engines and screen readers can see both. ALT is intended to be brief and concise, and should never be used for SEO purposes. They are a requirement under accessibility guidelines. TITLE can be more descriptive, give more detail and be less brief. It can be leveraged for SEO.

We can style tooltips with CSS by using an attribute selector, afaik.

24 Likes

Oh, thanks. that makes more sense.

1 Like

Thanks a lot! I have been worrying about this for minuter!

Well explained. Thanks

1 Like

You said that “ALT is intended to be brief and concise, and should never be used for SEO purposes.” ,
but in the introduction this site says:" The alt attribute also plays a role in Search Engine Optimization (SEO), because search engines cannot “see” the images on websites as they crawl the internet. Having descriptive alt attributes can improve the ranking of your site."<

So i don’t really understand this point

5 Likes

Well that may be, when used in a natural way. Many would be SEOers have leveraged alternate text in any number of ways to curry favor in the keyword competition, rather than letting it serve its principal purpose…assistive technology.

Wouldn’t that contradict what the course is saying below?

  • The alt attribute also plays a role in Search Engine Optimization (SEO), because search engines cannot “see” the images on websites as they crawl the internet. Having descriptive alt attributes can improve the ranking of your site.

That is a blanket generalization. Can affect the ranking, not improve it. There are hundreds of factors. This is one very small concern. It’s primary purpose is assistive technology users, not search engines. It’s the belief in that statement that had SEOers gaming the system years ago until search engines devalued any boost to rankings ALT may have previously offered.

Conclusion? The course is a little bit outdated and the alt is used for blind people rather than for improving SEO. It makes sense as this ranking strategy may vary over time and browsers may change too in order to stop practices that boost certain webpages.

If you right click the image and inspect it, you’ll see your description written in the code. This is my first day on code academy or any real code learning so sorry if this reply is a bit noobish

1 Like

If you right click and inspect the image, you’ll find your description written in the code. First day learning so sorry if this is noobish lol but I was curious and inspected other web pages and we get to see how they coded it right there! Pretty awesome to get insight on how advanced coding can get without having to pay to see how it was coded

In reading your response, it seems to contradict something that is stated in the lesson.

" The alt attribute also plays a role in Search Engine Optimization (SEO), because search engines cannot “see” the images on websites as they crawl the internet. Having descriptive alt attributes can improve the ranking of your site."

The statement above seems to imply that the alt attribute CAN be used for SEO, but you say that it should never be used for that purpose. Can you please explain?

Thanks!

There are hundreds of factors, alt text being just one small consideration. In a perfect world it could have some SEO value but years of gaming the system by less than knowledgeable SEOers has diminished its importance by a great degree. Sure it may help robots determine the connection of the picture to the page topic but it is unreliable. The picture can be of a pink giraffe with alt text that says something completely different, just so the writer can pack in some more keywords. For your own sake, and the sake of your or your client’s site, don’t put too much stock in alternate text, and definitely don’t game it. SEs have humans who examine pages, too, not just robots.

The real purpose of alternate text is assistive technologies first, and SEs a distant second.

2 Likes

Thank you for the very clear and thought out response. I realized after posting that several others had asked a similar question. If I understand your responses correctly then alt is only one of many many factors that affect search engine optimization, but its impact is very small now due to the fact that it was being abused and newer algorithms account for that fact. Good programming practices suggest that we use the alt attribute for its intended purpose which is to enable accessibility programs and/or deal with broken links/links that do not load. Is this correct? Thank you again!

In as much, yes. Not broken links, though. Images that do not load. If the width and height are specified either as attributes or as CSS properties, the placeholder of the image will display the alternate text. If not specified, the alt text should still appear, though it may break the layout. Brief, concise and true, that is what makes the perfect alternate text.

1 Like
"what a beautiful flower!"    =>  subjective
"prickly rose blossom"        =>  objective

The latter is always preferred in alternate text. Use the title attribute to convey subjectivity.

We would never use alternative text on window dressing.

<img src="left_border_image.png" alt="">

Mind, in this day and age everything is CSS backgrounds. That is from the day when tables were used for layout, and CSS was just coming over the horizon.

Note that the empty value of the attribute tells the user agent, “Nothing to see here.”