Images and Alternate Text

The alt attribute for images is intended to provide some alternative text to display in place of the image for browsers that have images turned off or which are unable to display images. Web readers that speak the content of the page to blind people is one example of where such text gets used. As it is intended as an alternative to the image it should ideally convey the most important part of the information that the image is there to provide.

Unfortunately not all web pages use the attribute properly for its intended purpose. Some sites place junk in this attribute in the mistaken believe that it will help get their page a better placement in the search results. Such people believe that search engines are more important visitors to their site than those real people that the alt attribute is really intended for.

Another consideration regarding the alt text is a bug in Internet Explorer where any image that doesn't have a title attribute will be treated as if it had a title attribute with the same text in it as there is in the alt attribute. Some people are so familiar with this buggy behaviour that they complain that other browser are not processing their alt attribute text correctly whereas in fact it is Internet Explorer that is processing it incorrectly. This incorrect processing by IE though does have one advantage in that those who believe that the text will be seen by hovering the mouse over the image will be less likely to fill the attribute with junk.

Actually this behaviour on the part of Internet Explorer makes testing your webpage easier since by hovering your mouse over the image you get to see the text those who don't get to see the image will see without having to disable images in your browser. In fact this may be so useful that it is worth considering adding such functionality into other browsers where you do a lot of testing of pages. This can be easily done by adding a userscript into your browser. You can either specify that it is only to work on your sites where you need it as a testing tool or have it apply to all sites if you so desire. As a userscript it is far more flexible than the bug built into Internet Explorer because you can apply it selectively.

This userscript will copy the alt attribute into the title attribute and will add the existing title text if any to the end (after '--') so that both values will be visible in the tooltip. To restrict the script to only running on specific sites update (and if necessary duplicate) the include statement and replace the * with the address of the site.

The imgtooltip.user.js script just needs to be installed into your particular browser. For Firefox/Greasemonkey simply right click the link and select "Install User Script". For Chrome you need to right click and select "Save Link As..." to save the script to your computer first then go to the Extensions option in the Tools menu and drag the file from where you saved it onto that page. With Opera the easiest way is to go into the link and select "Save As" from the "File" menu to save the script into your user script folder.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow