Skip to Main Content

Indiana University Indiana University


Web Accessibility Made Easy: Using Alt Tags

This is one of the easiest web accessibility guidelines to implement. Though this is easy to code, creating a proper alt tag is not always the easiest thing to do. (And yes, technically the Alt tag is actually an attribute of an element, but the more common phrase will be used here.)

Alt tag basics

The Alternative tag, commonly referred to as the “alt” tag, is an attribute of the image tag (“img”) in HTML. Alt tags are read by most browsers. They provide an alternative text description for images or other elements so that those using screen readers have access to information conveyed by graphics. Also, if the image doesn’t load or only loads partially, the alt tag provides information conveyed by the graphic.

Guideline for alt tags

Provide a text equivalent for every non-text element used. One option for doing this is to use an “alt” tag. Non-text elements include: images, graphical representations of text (including symbols), image map regions, animations (e.g., animated GIFs), applets and programmatic objects, ASCII art, frames, scripts, images used as list bullets, spacers, graphical buttons, sounds (played with or without user interaction), stand-alone audio files, audio tracks of video, and video.

The reason to do this is so that meaningful graphically represented information can be conveyed to assistive technology users who use programs like screen readers. Having short descriptions of graphics provided by alt tags also makes it easier for users of assistive technology to navigate pages with lots of images. If more detailed information about the image is needed, provide it using a long description in addition to the alt tag. The long description, coded as “longdesc”, is a link to an external document with a “longer description” of the image or element. This gives you, the developer, the opportunity to go into as much detail about the picture as you think is important. It also gives user of assistive technology users the option to skip or view the extended description.

Alt tag best practices

The alt tag guideline states that every non-text element needs an alt tag. However, little guidance on formatting alt tags is provided. Here are some best practices to follow when using alt tags:

1. Use empty alt tags when non-text elements contain no relevant or meaningful content so that they will be skipped by screen readers. If an image element is used for layout, it most likely has no associated meaningful information to convey. The code <alt=""> tells the screen-reading software to treat the image as if it weren’t there.

2. Alt tags should be concise. If you need a longer description, use the “longdesc” attribute in tandem with an alt tag. Alt tags should be like captions for pictures in newspapers —short and to the point. A good rule of thumb is that an alt tag should be no more than 10 words and 140 characters. Short alt tags make it easy for screen reader users to quickly navigate graphical elements of a page.

3. If more information about the graphic is needed than can be conveyed by an alt tag, use the long description tag—“longdesc”. Longdesc is a link to an external document with a “longer description” of the image or element. This gives you, the developer, the opportunity to go into as much detail about the picture as you like, and it gives the user of assistive technology the option to either skip or access the extended description.

4. Alt tags should accurately describe the image. Many websites contain alt tags for images that say “picture” or “screenshot”. These descriptions don’t provide useful or relevant information about the image and therefore are not useful. The alt tag should either give a terse, accurate description of the graphic, or should be coded as an empty alt tag for graphics conveying no relevant information.

5. Do not use the words “image”, “graphic”, “picture of” as part of the alt tag. Assistive technology already recognizes and announces image elements.

6. Graphical links should have alt tags that describe where the link takes you, not the image associated with the link. Assistive technologies identify and report graphical links on a page. The user needs to know where the link will take them, not what the link is an image of. And text associated with or embedded in the image will not be read by a screen reader.

Tutorial

Here is a step-by-step explanation for adding an alt tag to an image. When appropriate, all the tutorials in this series will use these example websites: Bad example web page and Good example web page.

1. Open the bad example web page in your choice of web development software.

2. Using the code view, locate this line of code:

<a onclick="parent.location='http://www.indiana.edu'"><img src="Images/iu_white.gif" width="171" height="44"></a>

3. Now add the alt attribute to the img tag so the line of code looks like this:

<a onclick="parent.location='http://www.indiana.edu'"><img src="Images/iu_white.gif" alt= "Indiana University Homepage" width="171" height="44" ></a>

4. It’s this simple. For this example, we used a graphical link so we followed all the best practices for alt tags listed above but needed to pay special attention to #4.

Wrap Up

Adding alt tags to images is not difficult. Just follow the alt tag guideline to make sure your alt tags concisely and accurately describe images that convey meaningful information.


One Response to "Web Accessibility Made Easy: Using Alt Tags" to “Web Accessibility Made Easy: Using Alt Tags”

  1. Sandy Says:

    I’ve begun using alt tags…I think with my last couple of posts. Are you able to tell if they’re done correctly? That is to say, yes the picture is there; things seem to load alot slower than when the ID was a number on blogspot, so I wonder if it’s correct? Is there a way you can tell? Is there a tool to check? How do we know if the crawler is infact picking up the code? I had a lot more code with my pictures then your example above. I did though insert the name of the photo after alt =.

    Is there a difference between when you load directly from your computer vs loading from computer to photobucket then from that to blog? The extra step always seemed silly, time using, and confusing to me. But, since my code was quite a bit longer than your example I wonder? I would post here, but when I tried that, you don’t see the code…

    Thanks for whatever help you can offer
    Sandy

Leave a Reply

Get Training Tips via RSS Subscribe to Entries feed or Read Comments via RSS Subscribe to Comments feed.