UTMB Web Styleguide: ALT Tags

Visit the
PRINT section

Visit the
WEB section

Visit the
MULTIMEDIA/
SPECIALTY ITEMS section

Visit the
RESOURCES section

UTMB Web Page Standards

ALT Tags
An "ALT tag" is a text-based description of an image on a web site. The image might be a button, menu bar, a header, a photo or any other non-text representation of information on a web page. The ALT tag provides an alternate description of the image, one that is accessible without actually seeing the graphic. Instructions on adding ALT tags appear below.

Descriptive ALT tags should be used with any image on your site, including text that has been converted to an image. ALT tags make your site accessible to the visually impaired and individuals with slower connections who choose to not load graphics. Likewise, if you have a graphic with a link, use the tag to provide a usable, meaningful description of the link.

The ALT tag will appear as the reader holds the mouse over an image for a few moments; this offers another incentive for offering good tags; it expands the usefulness of an image (See the Old Red example, below. Notice the extra information the tag can offer?).

The ALT tag also appears while an image is loading, which again behooves the use of a good, descriptive tag, especially for users with slower connections. It may be just the incentive to make them want to wait for your page to completely load.

Good use of ALT tags will also improve rankings with many search engines. Since search engines can't index images, they rely on words to help define the content you offer. ALT tags offer those words.

ALT tags are a state requirement and an element of ADA compliance. However, if you have a site that is graphic-intensive, ALT tags will not carry you. State regulations and UTMB's web publishing guidelines require that you provide an all-text version.

What does an ALT tag look like? Here's the format:

<img src="image.gif" alt="Your keywords">

Here's an example:

<img src="oldred.gif" alt="photo of Old Red, the
        Ashbel Smith Building, circa 1900">

One final note: Keywords in your ALT tag should be in a sentence or phrase form, rather than in list form.

How To Do It:
FrontPage: place the image on the web page you are constructing. Click the image once to select it. Right-click and select "Picture Properties." A Picture Properties dialogue box will pop up. Under the "General" tab, there is a section called "Alternative Representations." In that section, type your ALT tag content in the box next to the word "Text." Close the box, save the file, and you have successfully added an ALT tag.

DreamWeaver: place the image on the web page you are constructing. Click the image once to select it. In the Properties Inspector, enter the ALT tag content into the box next to the word "ALT." Save the file, and you have successfully added an ALT tag.

HTML: See example above for proper syntax.