Why your alt tags may not be working
It’s important to include what people usually call “alt tags” on all your pictures, so that if the picture doesn’t load for some reason, at least there’s a short description of what should be there (especially important for mobile browsing, where many people have images turned off for speed). If you’ve checked out your website in Mozilla Firefox or one of the other w3c-compliant browsers, you may have been shocked to discover that NONE of the alt tags you spent so long preparing are working – at least, not in the way you probably expect.
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 65% of users are still using Microsoft’s browser.
But a growing number of users are moving over to other, faster and more flexible browsers with less security problems, such as Mozilla’s Firefox (which was the first to offer tabbed browsing, making it easier to keep a number of pages open and switch from one to another quickly). Firefox’s market share has been increasing steadily for several years.
So when you look at your web pages in IE, you will be seeing what about two-thirds of your visitors 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 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. And most of them will be using browsers other than Internet Explorer, where “alt” does not function in this way.
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. Plus, should you wish to use IE (some internet pages are non-compliant enough to require it), you can get an optional extra, which gives you IE-type tabs (unfortunately, not available for linux).
OK, so I’m assuming you now have both browsers installed on your computer. Load up this page in both of them (or if you use Firefox with the IE tab option, load it up in standard and IE tabs) 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.
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.
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 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). It comes up when you hover over the link.
What I did there was to add the title parameter to the link, like this:
<a href=”http://download.cnet.com/mozilla-firefox/” target=”blank” title=”Download Mozilla Firefox from Download.com”>here</a>
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
