How to write good ALT tags for images

If you know anything about Accessibility standards, you'll know that images on your website need ALT tags attached to them. ALT tags are nothing more than ALTernative text that is displayed whenever an image cannot be displayed.

Why is this important to Accessibility? A lot of people who are visually impaired use screen readers to literally read the contents of a web page to them. Screen readers obviously cannot read images so, instead, they read the ALTernative text that has been assigned to them.

If you move your mouse over an image whilst using Internet Explorer, you'll see the ALT text or tag that has been assigned to that image (if there is one). Strictly speaking, this is not correct behaviour for a browser, but if you can find an image and see this, at least you know what I'm referring to!

It may be hard to imagine that there is a skill involved in writing these ALT tags. After all, you need only write a description and you're done, don't you? Unfortunately, like most things web, that's not strictly true. Here are a few things you may want to consider along the way.

Spacer images

If your website uses spacer images, assign null text rather than nothing at all. Most screen readers will therefore completely ignore the image and not declare that it even exists.

How do you assign null text? Here's an example of what an ALT tag looks like within an image (img) tag:

Why not create ALT text that says "spacer" or "spacer image" or even "this is a spacer image"? Well, for one thing, it would be really irritating to the user of the screen reader! Imagine having to sit through "Image this is a spacer image" being said a dozen or more times as it works it's way through all the spacers on your page!

And don't make the mistake of just leaving out the ALT tag altogether. If you do most screen readers will then proceed to read out the filename. So a file stored in 'mydomain.com/images/miscellaneous/whiteonepixelspacer.gif" would be declared as "Image images slash miscellaneous slash white one pixel spacer dot gif". You may not just lose the visitor, you may induce a fit of rage at the same time!

Icons and bullets

Treat icons and bullets in pretty much the same fashion as you would treat spacer images. In other words, assign null text. This will prevent a list of items being read out with the word "bullet" (or whatever you write in the ALT tag) declared before each item in the list.

If you are using icons to make a page of links more visually pleasing, again, it's better if the icon is not declared at all.

Of course, it's far better if you call your bullets and icons as images via your CSS files. This way, they're completely removed from the actual HTML in the web page and there is no need to apply an ALT description at all.

Supporting images

Supporting images - or images that are merely meant to enhance the visual appeal of the page, or to decorate the pages should also be assigned null ALT tags. As a rule of thumb, if there is no need for the screen reader user to know that it's there, then assign null text and prevent the screen reader from announcing it.

Navigation menus

If your navigation menus require visually attract text rendered as images, then you really have no choice but to embed the text within the image. That's fine, but please don't use the ALT text to embellish the image or to attempt to score points with the user. In other words, don't write "Click here to read all about our amazing services, incredible staff and unbelievable prices".

If your menu item says ‘Services' then make your ALT tag say ‘Services' as well.

ALT tags should describe the content of the image and should repeat the text word-for-word. If you want to expand upon your navigation, use the title attribute.

Your logo

There is considerable variety in the way that websites apply ALT text to the site logo. Most say ‘company name' while others say ‘company name logo' and still other describe what clicking the image will do, e.g., ‘Return to homepage'.

In my opinion, the ALT tag should, again, describe the content of the image so "company" or "company name" works better for me. If I'm using the logo to link back to the homepage, then I'll describe that using the title tag.

In conclusion

Writing effective ALT tags isn't rocket science, the key rule being never to exclude an ALT tag, even if it isn't relevant - always use Null text if unsure.

One final point: keep ALT tags short and sweet. Listening to web pages with screen readers takes longer than you might think. Make that experience as painless as possible. You'll keep more visitors and they'll be happier too.