What is the Alt Attribute?
The alt attribute, or alternative attribute, was designed to provide a
text description of an image if the image cannot be rendered. In fact it is
part of the HTML coding standard. Its uses are many:
- Visually impaired people have audio readers that use the alt attribute
- alt text appears if the user has turned off browser image loading
- a missing image will show up with a red X and the alt text beside it
- some search engines use alt text to help classify the image
- web phones have limited bandwidth and many do not display images
- For top of the page images
Describe the header image and add on the purpose of the page. For example:
Smartlab Software Logo - About the Alt Attribute
Wine Vineyard - Contact Us
Note that the alt text is a replacement for the image, the title gives a brief description (caption) of the image, and the longdesc file gives a long description of the image. The alt text is not supposed to be a description of the image, it is supposed to be an alternative representation of the meaning of the image.
The search engines gather information about the image through several sources:
- Image file name (image1234.jpg vs. laptop-computer.jpg)
- Text immediately surrounding the image
- The overall content of the page the image is on
- Image ALT attribute in the image tag
ALT attributes can use to add some flavor to navigation images such as "About Us" can have alt text like "learn more about xyz company".
Check your web page with images turned off. See if the descriptions and navigation makes sense.
If you have a better business bureau image you can spruce up the alt attribute like:
alt="We are a Better Business Bureau accredited business. Click
here to verify our BBB rating."
Alt Attribute Coding
Alt attribute coding differs between HTML and XHTML
<img src="img.jpg" width="90" height="80" alt="open casement window">
Put no text in the alt attribute for images that have no meaning such as spacers, decorative images, or any page formatting.
<img src="spacer.gif" width="1" height="5" alt="">
Alt Attribute Text
- No more than 125 characters long
- No special characters. Only commas and periods.
- No HTML
Tips on Writing an alt Attribute
- Images that are links should describe where they go
- Don't begin with "Photo of" or "Picture of"
- Describe the use of the image; not the image itself
- If the image is of text, use that text
Negative Uses of the Alt Attribute
The alt attribute can be abused and in some cases have a detrimental effect on SEO efforts.
- Do not overstuff keywords in the alt attribute.
- Do not hide keywords in images used for design and spacing.
- Do not specify meaningless text. This will irritate and confuse the user.