The Secret to Successful ALT Tags

January 2009

The humble ALT tag is easy to use, but tricky to get right: you're catering for two types of audiences which have different needs: one audience is search engine spiders, who want to analyse the content of your website for its own users, and the other is people with visual impairments, who need a bit of help understanding what your images are all about. In this article, we take a look at what ALT tags are, and how you can use them to improve your search engine rankings and improve the overall accessibility of your website.

What is ALT text, and who uses it?

When you insert an image into a HTML document, you can use several attributes, including mandatory things like the source ('SRC'), and less crucial things (but still important) like width and height. Another optional attribute you can use is the ALT tag - short for alternate text. The idea is that the ALT tag shows if the image is inaccessible. This means that the ALT tag is useful in situations where there is something physically wrong with the image (e.g. The server which hosts it is offline or responding very slowly, or the image file is corrupted and cannot be displayed in the browser), or if the user who wishes to make use of the image cannot see it for some reason.

While the ALT tag is a good fallback for technical difficulties, there are two specific user groups who rely on the alt tag, and both user groups are very important to the success of your website, for different reasons. The first set of users are search engine spiders, and the second user group are visitors who are visually impaired or blind.

Both for accessibility and for SEO (Search Engine Optimisation) purposes, it's important that you don't lose your would-be visitors. To err on the side of caution, assume that both user groups cannot see your images at all, a situation you have to work around with the judicious application of ALT tags.

If search engines can't 'see' what your photographs are about, you're wasting a huge opportunity in terms of attracting valuable traffic from the likes of Google, Yahoo and Bing. If your website is useless to people with visual impairments, you're alienating a potentially significant audience group. Needless to say, you need to do your best to help them both along: ALT attributes are the solution.

Creating good ALT tags

On a website, you will generally have three different types of images: one type is images that are part of the page furniture (say, a horizontal line between two paragraphs, or the page background image). These images that can be considered as eye-candy, should be part of your CSS rather than of your HTML: they don't add any new functionality to your website, so they can be ignored for the purposes of ALT tags.

Far more importantly are the second type of images: illustrations. These might be photos of your staff, pictures of your office, images from your projects, or similar. You can (and should) add captions, but in addition, remember that the photograph itself introduces new information. This is the information you have to convey to search engine robots and visually impaired visitors somehow.

So what makes a good ALT tag? A simple exercise is to pretend to be reading out the website over the phone to someone, and describing the photo you're looking at, in as few words as possible. Black and white photo of three soldiers standing next to a wall in a village, leaned casually on their rifles, smiling and chatting to one another or Happy 4-year-old uses a pink space-hopper on a lush green lawn are fabulous descriptions of photographs, and both would be of huge value to search engines and people using screen readers. Of course, the actual photo would contain more information, but these condensed versions contain the important information which would ensure that your visually impaired visitors or their robotic search engine counterparts aren't left out.

The final type of images are buttons which allow you to do something. From a usability point of view, buttons (like 'Submit' and 'Subscribe') and navigational elements ('contact us' and 'our history') should be text rather than images, but if you have to use images for these, the ALT tags have to be descriptive and concise. For usability's sake, write them as actions: "Button: Submit request for more information form", "Navigation: to our About Us page" or "Go to the page describing the history of our organisation".

If you're struggling to come up with a good ALT tag for any image, then imagine it as if all your images were blank, and that you'd hear a voice read something out when you hover over them: what would be the most concise yet useful message the voice could read out? That's your ALT tag.