Any need for both in this scenario (title and alt attributes)

Hi,

Is there any point in having the title attribute on the link in this case…?

Basically linking to the larger version of an image.

<a href="images/puppies_large.jpg" title="Some puppies"><img src="images/puppies_small.jpg" alt="Some puppies"></a>

To me it seems overkill and would surely be annoying for anyone using a screenreader?

A designer I work with keeps insisting on both so that when people hover over the image it tells you what it is no matter what browser but that isn’t the purpose of either attributes is it!

Any insight would be welcomed

Having ‘duplicated’ alt and title attributes on a picture is just wrong and it is completely pointless. The title in this instance is attached to a link not an image so should provide additional information regarding the link not the image. Whereas the alt is supposed to be only viewable if the image is unavailable.

Disagree.

First, both attributes should be on the img, not on the href. The alt attribute is what the browser displays if the image can’t be loaded. The title attribute is what the browser displays as a tooltip popup when you hover on the image. Each has its own purpose.

In this case, “Some puppies” as the tooltip is, indeed, pointless, since the site visitor doesn’t need to be told what the image is when he hovers his mouse on it - he can see it! In this case, a more sensible title attribute might be “Open large image” - that would tell the visitor what will happen if he clicks on the small image.

If you don’t want any tooltip at all, use title=“”. Don’t just leave the attribute out, because IE, contrary to standards, will then use the alt attribute for the tooltip, which is certainly NOT what you want.

Tell people in plain text elsewhere that clicking the thumbnail goes to a larger version.

I would argue the alt text there should say the purpose of the link, not the “text” of the picture, unless it’s a gallery? Because when you have
<a href=“somewhere”><img…/></a>
the image is taking the place of what WOULD have been anchor text. (if it’s a gallery then I guess it would need to say “larger version of this picture of puppies” and alt text on the large version just whatever’s appropriate to that image)

In this case, a more sensible title attribute might be “Open large image” - that would tell the visitor what will happen if he clicks on the small image.

Quite evil to kinda give the finger to those who aren’t using a mouse. With the explosion of mobile browsing this is just getting worse. Everyone should be told clicking on the image brings you to the large one.

Of course, browser vendors could make title accessible to non-mousers, but for whatever reason, they choose not to. So WE the developers are stuck fixing this. Which sucks balls.

If you don’t want any tooltip at all, use title=“”. Don’t just leave the attribute out, because IE, contrary to standards, will then use the alt attribute for the tooltip, which is certainly NOT what you want.

Sometimes I do this, but more often I’ve discovered regular IE users are expecting that tooltip… some people even use it to orient themselves. So many times I just leave it. People like their bugs.

If I use it I would always use the title attribute (on the link… didn’t realise you could add the title attribute to an img!) to give the user extra information about where the link is destined.

One of the reasons I brought this up is, as I mentioned, the designer I work with seems insistent on adding both with identical content to images purely so that the tooltip appears across browsers. I knew this was incorrect I just wanted your opinions, which have really helped.

Here is the page I was talking about in this instance (extra titles removed… oh and warning, there are boobies)

Would you change anything?

You’ve still got a cross-browser inconsistency.

First, I need to correct something I said earlier. If there’s no “title” attribute, IE7 (and earlier) uses the “alt” attribute as the popup tooltip. Later versions finally fixed this (mirabile dictu).

So, on your page, hovering the mouse on the thumbnails yields no popup tooltip, except in IE7. There, you get the contents of the “alt” attribute as the tooltip.

For true cross-browser consistency, if you don’t want a popup tooltip at all, use title=“” on every img.

You can add a title to any displayed HTML element, and it will give the title text as a tooltip on :hover.

Thanks for all the input guys