Want a Website Analysis?
Learn how to increase visitor action, reduce site confusion for new visitors, and get those new visitors returning back for more! Get BWI's Usability and Design Analysis.
Images are In Charge of Your Linking Title
By Robert Campbell on Tuesday, November 3rd, 2009
Previous: How Green are Your Affiliations and What Does It Reflect
Next: Tags Show What Visitors Like
Firefox and Microsoft Internet Explorer handle the title attribute for images differently. Now before you IE bashers jump on this please take the time to read this to the end. Firefox messes this up as well. Here are some of the problems, and my simple partial solution.
Also, within this post I often refer to the mouse over popup. If you are unfamiliar with what I mean by that, simply hover your mouse over my logo in the top left. Within a second or two you should see a small window display “Best Web Image – Web Usability and Design”. That is what I am talking about.
Image Attributes Put Into Use
If you use this as an example:
<img src=”http://www.bestwebimage.com/bwi125.jpg” alt=”BWI Banner” />
Firefox will display the image, and define the alt attribute as BWI Banner. A mouse hovering over will reveal no information about the image. If you use Microsoft Internet Explorer you will get the image, and a mouse over will reveal the alt text of BWI Banner. This reflects on how IE still (in version 8.0) tries to fix “errors” in code.
Using the alt attribute alone should not display anything on a mouse over, but IE is guessing that the author forgot to include a title attribute for the image, so it uses the alt attribute. What if you don’t want alt text to popup on a hover? Don’t use the required alt attribute? That’s bad news for text browsers.
Make sure you always use the alt attribute with an image. The alt is a W3C required attribute for the image tag.
If you use this as an example:
<img src=”http://www.bestwebimage.com/bwi125.jpg” alt=”BWI Banner” title=”BWI Title of Banner” />
Both FF and IE will display the title attribute on mouse over. Everything worked as planned.
Now the Linking
What happens to the image alt and title attributes when stuck within an anchor, <a>image</a>? I can say this…AAARRRRRGGGG!
If you use this as an example:
<a href=”http://www.bestwebimage.com/” title=”bwi banner link title”>
<img src=”http://www.bestwebimage.com/bwi125.jpg” alt=”BWI” />
</a>
Firefox will use the title attribute of the anchor, as the parent tag should. IE however, ignores the anchor title, and uses the image alt attribute. That simply makes me want to pull my hair out.
Now this is where I go really nuts….
If you use this as an example:
<a href=”http://www.bestwebimage.com/” title=”bwi banner link title”>
<img src=”http://www.bestwebimage.com/bwi125.jpg” alt=”BWI” title=”bwi banner image title”/>
</a>
In this case both FF and IE ignore the parent title attribute, and use the image title for some reason. This is basically why I title this post the way I did. For some reason both browsers, FF and IE, treat the image title attribute with more weight than a parent title attribute. Also, for those of you that constantly bash IE, this makes a good example of FF not handling hierarchy consistently. FF gives priority to the anchor title when the image has no title, but then takes it way when the image does.
Partial Solution
Not happy with how any of this is being handled, I say use the alt and title attribute for all of your images. This will give a consistent effect regardless of browser type. They will display the mouse over popup, and if put inside an anchor tag will display as planned/titled as well. If you don’t want the mouse over popup on an image don’t use an alt or title attribute, but know you are creating accessibility problems for some of your users.
Like this post? Get more website tips delivered straight to you by email. Full feed artiles are delivered, and are managed by Google's Feedburner service.
Just Posted! HTML and CSS Cheatsheet
Related
Category: Code, Usability & Design Tags: anchor, attributes, firefox, ie, image, microsoft
I am using Opera and firefox (only when I have to). I never liked IE. It’s not a surprise to me that IE has such problems but I thought that firefox programmers try to make their browser more bug-free. I guess I was wrong
Opera behaves the same way Firefox does in the final case, which basically gives just another reason to skip the title attribute on anchor tags if it links an image with a title attribute. It should be the other way around, but oh well.
Is there a way that I can set the image attributes alt and title to the same value without just repeating the attribute?
Not that I know off hand, other than coding in PHP or something that makes it that way. The alternative is not displaying the title parameter, and that may not be an option if you want the mouse over popup with Firefox or Opera browsers.
The conflict is how browsers are handling the title parameter when it is enclosed in a parent tag that has a title of its own, like the anchor tag. If it’s not a browser issue, than it should be a user error, and W3C should start identifying it…something like :Error, parent tag already has title attribute. You need to remove one or both. Then the browsers would display as we expected, at least Firefox and Opera anyhow.
I like to use title tags for SEO reasons but I really wish those balloon boxes with the title on them wouldn’t appear when one hover overs a link with a title tag.
i want to know if google accounts the title or alt attribute as regular text, ie: you can search for keywords in them
Nice post – I always use alt tags, but it’s pretty annoying when you get the balloon box, especially if ts a long title!
Super long balloon boxes….thinking that might make a good poll. I think I remember Google’s Matt C. saying something about how long alt tags are a bad idea.