Why Your ‘alt’ Tags May Not Be Working

If you’ve checked out your website in Mozilla Firefox or one of the other non-IE browsers, you may have been shocked to discover that NONE of the ‘alt’ tags you spent so long preparing are working.

What browser do you use to check your web pages when you’re developing your sites (or when your webmaster asks for your approval on a new layout)? If it’s Internet Explorer, you’re among the majority – around 60% of users are still using Microsoft’s browser.

But a growing number of users are moving over to other, more flexible browsers with less security problems, such as Mozilla’s Firefox (which offers a number of advantages, not least of which is tabbed browsing, making it easier to keep a number of sites running and switch from one to another quickly). Firefox’s market share has been increasing steadily every month for over a year.

When you look at your web pages in IE, you will be seeing what most other browsers see. But as usage of other, arguably better browsers increases, you need to at least double-check what these ‘renegade’ surfers are seeing as well.

One problem I spotted when I made the switch was that the ‘alt’ parameter on image tags doesn’t work. I found this annoying, but I didn’t realise that the problem is that the authors of Internet Explorer made an error in their implementation of the HTML specification (HTML was not invented by Microsoft, but by a completely independent entity).

The ‘alt’ parameter is not meant to be used in the way almost everybody uses it. And because of this it will not work this way in many other browsers.

This is a serious problem for webmasters like myself who are based in the UK, because we have a legal obligation to provide tool tips for images, to help blind users to use the internet.

To illustrate what I’m talking about, you will need to have both IE and Firefox available (If you’re developing pages to put online, this is a good idea in any case). If you don’t have Firefox already on your system, you can download it completely free here. Why not try it (no, I am not making anything out of this in any way). You will never need to pay a licence fee and you don’t need to put up with advertising banners either.

OK, so I’m assuming you now have both browsers installed on your computer. Load up this page in both of them and take a look at the picture on the left in each:

Hover over it with the mouse.

In IE, you should see a message (or tool tip), but in Firefox you will not see anything new.

Tool tips without Alt

Now, hover over the righthand picture. This time you should see the tool tip in both browsers.

So… How did I do that?

It’s really pretty easy, although depending on how many tags you need to change, it could take a while. (I have hundreds, which I am in the process of swapping over just now, as soon as I have finished this article).

All you need to do is to double up your alt tags, substituting ‘title’ for ‘alt’ the second time, in all your <img> tags like this: where you have alt=”fred”, you now need alt=”fred” title=”fred”.

ALL?! I hear you say. (I just hope you have a good quality HTML editor that will do batch find and replace.) Depending on how many pages you have, yes, it could be a longish job. But it’s something you can do over a period of time, as you work on a particular site. At the moment, less than half of the browsers in use are affected by this problem. But the numbers are growing every day.

PS. While we’re on the subject of ‘title’ as a parameter in <img> tags, there’s another little known use for this: you can also add a tool tip to your links in the same way!

I don’t know whether you noticed earlier on, when I recommended downloading Firefox, but there was a tool tip on that link (of course, this only works in html, so if you’re reading this in a plain email, you won’t have seen this). I’ve also put the same link at the bottom of the demo-pictures page. Take a look now at the tool tip that comes up when you hover over the link.

What I did there was to add the title parameter to the link (in the line below the angle brackets are replaced with curly brackets):

{a href=”http://www.download.com/Mozilla-Firefox/3000-2356_4-10208565.html?tag=pao” title=”Download Mozilla Firefox from Download.com”}here

Simple, huh? So, if you’d like to, you can add extra information to your links – or perhaps an extra ‘puff’ to encourage clicking… the possibilities are endless.

Well, I’ll sign off now, with the hope that I haven’t involved you in too much work. ;D

Catch yer later,
Frann

Written by: Frann Leach
About the Author: Frann Leach is webmaster of InformationZone.biz: Internet Marketing resources and lives in Edinburgh, Scotland.