Images
"Alt text" or "alt attributes" are the most important components in making images accessible. These should communicate the purpose of a given image correctly and concisely. It’s always important to provide descriptive information for any images that are not decorative images so users with screen readers can know what the image is. Some of examples of alt text include:
<img src="cat.gif" width="100" height="100" alt="an image" />- Because the alt text does not describe what the image is of it is a horrible example of alt text.
<img src="cat.gif" width="100" height="100" alt="a gray cat" />- Better than the above example, but perhaps not enough information to give a clear idea of what the image is.
<img src="cat.gif" width="100" height="100" alt="a gray cat standing on a window ledge looking out into the back yard" />- This alt text may be the best description of the image, however it may also be a bit too long for some.
- Provide a null alt text for decorative images that only help with the layout, such as an image that forms a rounded edge for a border. Other types of images with no content are transparent "spacer" images used to add space between two elements. Null alt text looks like the following:
<img src="spacer.gif" width="100" height="100" alt="" />– note that there is no space between the "" marks; a space would not be a null alt, but would be read as "space" instead. - Another place to use null alt text are with images where an image would have the same alt text as whatever text is next to it (or even a second graphic that would have the same text). For example, if an image of a map was used next to the link text for "maps," null alt text would be preferable to having the alt text say "maps" as well.
- A link button that has the text in it would still require alt text describing the image; otherwise, a user wouldn't know what the link goes to. Example:
<a href="images.php"><img src="imagesbutton.gif" width="100" height="100" alt="Accessible Images" /></a> - Do not put important images in the background, as it is impossible to add alt text to background images. If an image contains important graphics or information, it is best to make that image a foreground image.
- Image maps require alt text for both the image and the hot spots. (This applies to client-side image maps only, as server-side image maps cannot be made accessible, so it is best not to use them.) In the image map, each "hot spot" or link should have its own alt text to indicate what is being linked, while the image map itself should have a null alt text.
- Text within graphics usually cannot be resized and may be impossible to read by someone with low vision. Some magnifying software will magnify the text; however, it will be pixilated and difficult to read. In order to be as accessible as possible, don't use text within graphics unless it is absolutely necessary. And when it is necessary, make sure there is appropriate alt text available, such as in the case of link buttons.
- Color and contrast are also important for images; for example, if the image is of a street map with the different routes color coded, users with color blindness will not be able to interpret the map. It is always important to make sure the image can be seen as clearly as possible.
- Any image that flickers or produces a strobe-like effect may cause seizures in some individuals. Don't ever use them.
- Animated images may be distracting and annoying to users. Consider carefully whether animation is truly necessary. If it is absolutely necessary, make the animation stop automatically after the first cycle.