If an image has both the TITLE and ALT attributes associated with it, does the TITLE tag take precedence over the ALT text? I ask because I am using a wordpress site that has both the tags associated with an image and when I hover over the image in IE, FF, Chrome, etc, I see that the <title=“text here”> tag displays and not the ALT text.
So, for acccessibility requirements, does this matter if the title tag shows instead of the Alt? If i turn off images, I do see the ALT tag, though.
No; it does not take precedence. You will never see alt attribute values on hover in any browser that follows the HTML specifications for these attributes because that is not what alt attribute values are there for.
No; it does not matter if alt attribute values appear on hover. It’s of no real consequence to users of browsers that may do that and it does not change our approach to their use or non-use according to the status of an image.
Although, you should keep in mind the limited value of title attributes. Never use them for anything remotely important.
[FONT=Verdana]Sounds like you’ve spent too much time in the company of IE, and so have misunderstood how the two attributes are supposed to work…
The alt attribute should be shown in place of the image, any time the image isn’t available (eg text only browser, user has turned images off, image not found or not yet loaded). The title attribute should be shown as a tooltip on :hover for any browsers that support that functionality. You may in some cases decide that you want to use the same text for both, or you may decide to have different text, it depends on the situation and the image.
Unfortunately, because for years IE has incorrectly shown the alt text as a tooltip on :hover if there’s no title attribute given, a lot of people have assumed that’s what is supposed to happen. It isn’t. Only the title should ever be shown as a tooltip on :hover (and you can likewise put a title on any element to get a tooltip).[/FONT]
Bingo. That is what has messed me up. I recall ALT text displaying as a tooltip years ago with IE, so I agree that it has “messed up” my thinking on how ALT text is supposed to appear in the viewport. So, the only thing that SHOULD be appearing during hover is the TITLE text for an image (if it’s there)?
So, the only thing that SHOULD be appearing during hover is the TITLE text for an image (if it’s there)?
Correct.
One reason we don’t put anything of actual value in title attributes, as mentioned, is because tooltips are limited to mouse users (sometimes screen readers, in some situations and some settings, depends).
If you are forced to have things like icons, this is one area where too many users need the title to know what the icon/button/whatever does. This means the design is poor and there should be text explaining what the icon means, but if you are stuck in a situation where you cannot add real text and the icons are beyond silly, you can have the titles on the focusable element (usually icons are for things like links and buttons, so there are usually anchors or inputs in them, both of which are always natively focusable by keyboard) and use CSS to display the title as a tooltip for keyboard users.
It’s not ideal and doesn’t work in IE6 or 7 but it can be better than nothing in a bad design.
Yes, that’s a reason why JS tooltip scripts gained popularity. I’m not the biggest fan of JS, but if it’s done well*, a tooltip script can be quite a nice enhancement in the right place. The text can be fetched from the title attribute, which gets overridden, or even fetched from the content property of a pseudo-class. It’s still not right for important content, which must be in the mark-up, but a big improvement over title attribute values alone for additional information.