In the course of optimizing a client's website for search engine spiders, I ran across an interesting difference between Internet Explorer and Firefox, which I decided was worth sharing.

One legitimate way to get more keywords into your web page, and at the same time make it more accessible, is to use the alt attribute in image tags.  Another less-often-used method uses the title attribute in the anchor tag for links.

Here's how to use both techniques when using an image as a link.

With a bare minimum of coding, you can get away with something like this:

<a href="contact.shtml"><img src="gifs/contact.gif /"></a>

For better accessibility, add the aforementioned attributes, like so:

<a href="contact.shtml" title="Send us your feedback here">
  <img src="gifs/contact.gif" alt="Send us your feedback here /">
</a>

Now you have doubled any key words that happen to be in these attributes, you have made the information available to users who can't see the image, AND you have perhaps given the user some useful information that was not in the text of the webpage.

Of course, you probably should also add other attributes, which I assume you are familiar with, such as width and height.

Back to the browser difference. Internet Explorer shows the information from alt in a small popup tooltip when you hover over an image.  Firefox does not do this, but it DOES show a tooltip with the information from title.

When both attributes are used in an image link, IE will show the info from alt, and Firefox will show the info from title.  So using both tags for an image link ENSURES that a popup tooltip will appear on MouseOver.

Update (September 8, 2011):  I noticed today that the new Internet Explorer 9 is acting the same as Firefox, in that it shows the title attribute in its tooltip. I guess I'll have to revise this page.

See it in action: Hover over the image link below, and see what happens with YOUR browser.  The coding contains both alt AND title, as in the example above.

Comments

There are currently no comments to display.

Click here to add a comment

Rate this page:

Tutorial Menu

• Frequently-made
  Mistakes in Perl
• SEO: Image
  Used as a Link
• Escape Sequences
  in Perl
• 11 Checkpoints
  for Accessibility
• Cloaking Affiliate
  Links

RSS Feeds

• Home
• Code Snippets
• Tutorials
• Resources
  • HTML & CSS
  • Javascript
  • Perl
  • Tools
  • Other
• Articles
• Contact