You may wonder why this is so important. The simple answer is that when people are using screen readers, they are at a definite disadvantage when the ALT attribute has been abused by filling it to overflowing with keywords. While these webmasters are hoping to attain a particular keyword density, they are making it very difficult for people who must use software to read the content on their monitors to them. These screen readers actually read the content aloud to the users so it becomes confusing when text is followed by repeating a lot of keywords. This makes the page inaccessible and rather annoying for the user. You should also remember that if the keyword density is too high, some search engines will penalize your site.
Do not use the ALT attribute to describe or label an image. A lot of people do this but it is not advisable. Never assume that alternate text is a description or a label. Words that are used for an image's ALT attribute needs to match the text and give the same knowledge that the image would.
Similar functional information should be provided that a seeing user would view. Text of the ALT attribute should be used as a substitute in case the image is not available. Users should get the same basic information from the image with the text.
There are some guidelines when it comes to using the ALT attributes. Something that is important to keep in mind is that there are minimum WAI requirements that need to be met when using ALT attributes. These WAI requirements are used as the benchmark for accessibility laws in the UK as well as the rest of Europe. The US has Section 508 accessibility requirements that must be met.
Some of these guidelines to using ALT attributes are:
- ALT attributes should always be added to images. This is required for accessibility as well as for valid XHTML.
- If you have images that are only for decoration, try an empty ALT or a CSS background image. This is done so that reading browsers avoid saying things such as "spacer image."
- The function of the image is what you want to get across. For example, any button images should not have the word "button" in the ALT text.
- Do what you can to flow ALT text with the rest of the text. This is how it will be read with screen reader software.
Image content can be categorized into three levels: These are:
- Eye Candy: This is content that has no purpose except to make the site look pretty. In a lot of cases this also satisfies marketing departments. There is little value with regard to content although sighted users may enjoy it. To achieve this, a null ALT attribute or background images in CSS are used.
- Mood setting: The middle layer of graphics creates the mood for them. While not actual content, or even necessary, these graphics are important because they highlight frame everything else.
- Content and Function: The image is the actual content here. It is important to use ALT-ify content and functional images. You may also need title and long description attributes.
Many people cannot understand why their ALT text is not working. The reason for this is that they do not know why the images are there. Each graphic is put on a specific page for a reason. You need to figure out just what that reason is. Does it enhance the mood, theme, or atmosphere of the page? Is it vital to the subject of the page? When you know the reason for the image, it becomes easier to write the ALT text.
One way to test the usefulness of the alternative text is pretend you are reading it to someone over the phone. Think about what you could say to a prospective listener to use the image to help make the page understandable. Your images text should be used in a way that will enhance the page for the listening user as well as the sighted one.
There are a couple other tools to help you with image descriptions. There is the degree of descriptiveness title between the ALT and longdesc. This adds information that is useful and can add flavor. The longdesc attribute shows the URL in a full image description. When the image information is vital to the meaning of the page, the ALT attribute does not provide a long enough description. That is when the longdesc is used to provide a rich and expressive documentation of the visual image.
There are a few key steps when it comes to image optimization. These are as follows:
- It makes things easier to pick a name for the file that makes sense as well as reinforces the keywords. If hyphens are needed in the file name, keep it down to only two hyphens. Also, do not use underscores to separate words.
- The file extension needs to be labeled.
- Keep the text closest to the image relevant to that image.
Most important, use every chance to move your site up in the search engines, and the proper use of images can definitely do this. Using these steps can raise your search engine ranking as well as bring additional traffic to your web site. It can start immediately.