What is the Alt Attribute?

The alt attribute, or alternative attribute or alt text or alt tag, 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
  or
  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 (laptop-computer.jpg is better than image123.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".

Alternate attributes are for images only. Title attributes in anchor tags can be used in links, however if you are performing SEO best practices, using title attributes in anchor tags is a first signal that you are probably spamming the search engines if not used with extreme caution.

Why? Because the anchor text (the text you wrap the anchor tag around) should suffice to communicate what you're linking to. Title text in anchors is best left to only be used when you're using them as a place anchor on a page, not as a link.

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 used as navigational elements should describe where they go. For example, a logo that has a link to a home page should be written as "Smartlab Software home page" instead of "Smartlab Software logo".
• 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. For example, if the image says 'Boutique' then use 'boutique' as the alt text.
• Alt text using acronyms should put spaces in between the letters. For example, IRS should be I R S or else the reader will pronounce it 'ers'.
• Images uses as spacers or in toolbars should be blank. Include them. Screen readers will skip over them.

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.

xx

If your image is of a specific product, include both the full product name and the product ID in the alt tag so that it can be more easily found. In general: if a keyphrase could be useful for finding something that is on the image, include it in the alt tag if you can. Also, don’t forget to change the image file name to be something actually describing what’s on it.

slscart and the alt attribute

slscart provides entering alt text for an image in many places

Products - Each large image

Blog gallery image

Embedded pictures, such as on a page. An Image Description prompt is provided which sets the alt attribute.

***