the alt attribute

Out of all the tags and attributes of HTML that can be said to be genuinely important, none is less used than the alt attribute. It can seem nothing more than a courtesy, or even an annoyance, easy to dispense with. On the contrary. In fact, its consistent and appropriate use is one of those things that really distinguish the good web sites from the shoddy ones, and in certain cases, forgetting it can make your site literally unusable.

alt stands for "alternative text". It is an attribute which goes in the <img> tag and takes a value of a string of characters. For example, look at this image and its tag:

<img src="ironbridge.jpg" alt="Image: Ironbridge Gorge, Shropshire" />

If you are using IE - and only if you are - you can hover your mouse pointer over the image to see this text as a "floating caption". This is a fairly neat trick. However, it has also not been particularly helpful to the correct use of alt because people have begun to use alt as a means of getting information across which is not presented by any other text. The problem is that the contents of alt are not displayed in this way by other browsers.

So why am I saying that alt is so important? Well, it's not just me: it's the World Wide Web Consortium too, who are doing their best to make the alt attribute obligatory. What alts really do is make your page more accessible because they allow it to be more understandable to those who cannot see the images for whatever reason.

Why might images not appear? Two main reasons: the first one being that, as phone and/or server connections are not always reliable, and as the downloading of images can take anywhere between 50% and 95% of telephone time, if your connection does go down in the middle of loading a page it is more likely to do so during the loading of images. "Broken" images are thus a reasonably common phenomenon when browsing the web. The two images specified in tags below, newton.jpg and einstein.jpg, don't exist in this web site's directory - they can therefore be used to mimic broken images. You can see which one has an alt attribute in it, and how much more user-friendly this is. (Exactly what you see here depends on the browser: if in doubt, view the source code of this page.)

      

More important still, some users browse the web with image loading turned off altogether. Either they are wanting to speed up their browsing, and have set their browsers to ignore images (you can do this through Tools - Internet Options on IE, or Edit - Preferences on Mozilla; though not at Leeds Uni itself, where this kind of thing has been disabled by ISS). Or, they use text-only browsers. Users with sight problems use these as they can render text using braille displays or speech synthesisers, and for browsers like these, images are obviously irrelevant. So the alt attribute's caption becomes a statement of what would have been there had the image been loaded.

It is simply wrong to assume that every user has "up-to-date" browser capability - this certainly applies to advanced web technology such as Java or animations, but it even applies to things like images. The alt attribute is such a simple thing, and should be used; as I've said, the HTML specification now makes it obligatory. The designers of the Sydney Olympics 2000 web site were prosecuted by a blind man for violating disability access laws, as their site (inexcusably, for a professional company designing the official site for the largest sporting jamboree in the world) did not use alts. And don't forget that "images" on a site are not just pictures, but icons, buttons, even sometimes text; all should have alt attributes, just in case. (They can also appear in the <AREA> tag.)

It is acceptable to include an empty alt attribute, that is, alt="" (with or without a space inbetween the quotes), but this should only be done for small images that are purely decorative. There are browsers out there that use a speech synthesiser to read out the pages, and if you don't include an alt, these browsers will read out the filename (e.g., "newton.jpg") of the image. With small decorative or "spacer" images, you don't want the filename to be read out - but nor do you want a long alt saying "this is a small image file I have used to pad out the page a bit..." OK, that's exaggeration, but don't go overboard if it doesn't matter. But don't omit them either.

I know that when teachers nag on about how important something is, and it doesn't seem to have immediate benefits for students, you can sometimes turn off, or deliberately not include it out of spite. I could go for the blatant bribe and say that large amounts of marks will be lost in your course work if you omit alts, but I'd rather appeal to your natures as good web designers, interested in including the maximum number of potential readers of your web page. Please use them.

Back to the top

Back to the menu for lesson 5