Before we talk about the more philosophical aspects of the alt attribute let's get right to the meat of the matter.
Proper-ish Use of Alt Attribute
- You must use an alt attribute on images.
- It may not be used for any element other than img,
area
, andinput
. For our purposes just concern yourself with the img element. And know you may not use alt on tables, href links, or anything else. - Use the
alt
attribute to provide text for visitors who can’t see the images in your document. - For decorative/style images, use
alt=""
instead of irrelevant text such as "red line", "spacer", etc. - If the image contains text then use alt="that text". If the image is company logo such as Galaxy Website Design then use alt="Galaxy Website Design".
- Alt attribute is not for tool tips. It does not (or at least should not) work that way.
- Remember the alt attribute is a substitute for those who cannot see the image for one reason or another.
When & Why is Alt Attribute Displayed
The alt attribute is displayed when the image is not. The alt attribute is literally the alternative to the image.Reasons for seeing alt text:
- Viewer is visually handicapped and is using a screen reader.
- Viewer has image download turned off by choice.
- Viewer is using slow connection.
Some people look at webpages with image download turned off by choice. Therefore they will see the alt text. They may have turned of image download for any one of many valid (and/or invalid) reasons. The choice was theirs. The alt text should make sense for these folks. You can turn off image download in your browser to see what this looks like. If you are a stuffer, hopefully you will be suitably shamed into better alt attribute behavior after looking at your pages in this fashion.
For those will slow internet connections, they will see the alt text temporarily while the image is being downloaded. When my broadband is acting more like narrowband dial-up, I will often see the alt text on the page while waiting for the image to download.
Alt Attribute Use Summary
- Alt-text is required for all images.
- If the image is active (link, button, area) the text alternative is the function of the image;
- If the image is not active but conveys information, the text alternative conveys the same information;
- If the image is redundant or conveys no information use alt="" for the text alternative.
- If the image is text then the alt-text should (usually) be the same as the text in the image.
- Make it as short as possible, but as long as necessary