The first commandment of Web Accessibility is to "Provide a text equivalent for every non-text element". Unfortunately, this is more often easier said than done, with inappropriate alt text often being the cause of many sites failing to reach even Single-A. So here is our guide to best practice alt text. First up, some clarifications:
-
Every image must have an alt attribute, but not every image needs alt text.
-
There's no such thing as an alt tag.
-
The purpose of alt is not to display a tooltip. Microsoft, in their wisdom, decided that this would be a nice feature, and implemented it in Internet Explorer. Firefox, and other browsers which implement the spec as it was intended, correctly don't display alt as a tooltip. If a tooltip doesn't show up in your browser when you hover over an image, it doesn't necessarily mean the image doesn't have alt, or the site is inaccessible.
-
You don't need to preface every alt text with "graphic", "image" or "photo" (except in specific instances, see below)
When it comes to writing alt text, all images are definitely not created equally. Alt text needs to be written according to the purpose of the image, not necessarily its content, and different types of images can be dealt with in different ways.
Images which convey information
It should be fairly obvious which images are intended to convey information and which aren't. If you're unsure, imagine you're reading the page out to someone over the phone. Is the information in the image important enough for you to mention? If so, it's an information image, and needs an appropriate alt text. As an example, if you have a page of information about a company director, including a photograph, then that photograph is intended to give information (i.e., what he or she looks like), so can be given alt text of "Photograph of Joe Bloggs, Chief Executive".
Decorative images
An easy one this. Using the phone test - if it's just there to add some pretty to a page, then it doesn't need descriptive alt text. It can instead be given empty (alt=" "), or preferably, null (alt="") alt text. Null is preferable because empty will show up a tiny yellow tooltip. Alternatively, you can remove the image from the HTML entirely, and display it as a background image using CSS. This should never be done for information images.
Functional images
Does exactly what it says on the tin. Or at least, the alt text should. Functional image alt text needs to describe the function, not the look. Where an image is used as a link, this is usually the destination of the link (e.g., "Home", "About us"). Form submit buttons should state the purpose (e.g., "Search now", "Go", "Cancel", etc.). If you're using your logo to link to your home page (or someone else's), then you don't need the word "logo". Your alt text could simply be "Organisation home" (if it's on your site), or just "Organisation" if it's someone else's.
Images of text
Should be avoided, where possible, in favour of actual text, but where you have to use them, the alt text is easy - just repeat the text that's displayed in the image. Layout images
Now that CSS is gaining popularity and browser support, these should be a thing of the past, but if you've got spacer gifs or images which are only there to help you with the layout, try and keep them to a minimum, and make sure they have null or empty alt.
Structural images
These should also be replaced with appropriate HTML or CSS, but if you must, then make sure they have alt which correctly reflects the structural nature of the image, rather than what it looks like (e.g., "bullet" or "item", or even "*" for a list bullet graphic).
Complex images
If you've got charts or graphs, or anything more complicated than can be summed up in a few words, then alt isn't really going to do it for you and you'll need a longer description. You still need to give the image appropriate alt text though, and this can be as simple as "Graph showing the steady growth in share prices over the past five years". For the longer description, this can be presented in several ways, the easiest and most logical of which is in accompany text on the same page. If you can't do that, a link to a longer description can be given, again, preferably adjacent to the image it relates to.
Image maps
The main image used for the image map needs alt text, as well as each AREA element. The alt for the main image could be something like "Map of wards in x district", and, perhaps obviously, the alts for the AREA element should follow the rules for functional images given above. If in doubt, step back and think about what the purpose of the image is, and remember, keep it concise.