Standardista

CSS3, JavaScript and HTML5 explained

Alternative Text for Images: the ALT attribute


For a webpage to validate and be accessible, all images must have a value for the alt attribute, even if that value is empty. The XHTML DTD requires only two atttributes for the img element: src and alt. The XHTML DTD tells you it needs to be there. WCAG tells you a bit more about what it needs to look like. Unfortunately, W3C writings are is not always understandable. This entry will explain, in human terms, how to write the values for your alt attributes.

Section 508/WCAG alt attribute Guidelines:

The first Section 508 guidelines states, “A text equivalent for every non-text element shall be provided (e.g., via “alt”, “longdesc”, or in element content)”. Checkpoint 1.1, the first priority of priority 1 of the WCAG guidelines states the same thing: Provide a text equivalent for every non-text element (e.g., via “alt”, “longdesc”, or in element content). This includes: images, graphical representations of text (including symbols), image map regions, animations (e.g., animated GIFs), applets… (I shortened it. the W3C tends to be loquacious.)

Decorative Images

Decorative images include background images, bullets, <hr /> equivalents, spacer images, etc. These types of images make the page prettier but have no semantic value for a webpage. The alt attribute for decorative images should be empty: <img src=”path/image.gif” alt=”" />.

Notes:

  • If you’ve read any of my other blog entries, or other articles on web standards, you likely will never have an empty alt attribute, since you are separating the content layer from the presentation layer; and therefore not including decorative images in your XHTML; opting instead for the use of CSS.
  • If you include an empty alt attribute, screen readers will skip over the image. If you fail to put an alt attibute in, the screen reader will read the entire URL of the image. Can you imagine listening to a robot say “spacer gif spacer gif spacer gif” repeatedly, or, worse, going letter bu letter thru the underscores and extensions of a filename generated by ImageReady.

Icons

The alt attribute of an icon should describe the intention of the icon, since an icon can have differing meanings depending on the context, and someone who has never seen the icon wouldn’t understand whatit emant if only visually described.

icon possible relevant values for alt useless alt
“correct”, “open”, “start”, “completed”, “asset”, “” circle with check mark
“stop”, “wrong”, “delete”, “close window”, “”, “remove module”, “delete email” red cross
“RSS Feed”, “add RSS feed to reader, “” orange square with 3 lines.
“answer”, “enter password”, “”, “primary key”, “security feature”, “” gold key
“security feature”, “blocked”, “password protected” closed lock

The desription of the appearance of the icon is almost alwasys a useless alt attribute value. Unless you are writing a manual on graphic design or on understanging iconography, don’t include a description of the icon as the value of the alt attribute.

An empty string is a possible relevant value for all icon alt attributes. When an icon appears directly before an equivalent definition of the function of that icon, then the value of the alt attribute should be empty. The two most common examples of this are the print and email icons:

icon possible relevant values for alt useless alt
“open email”, “email messages”, “go to inbox”, “send an email, “” letter
print, “” printer

When an icon describes the text immediately preceding or following it, it is redundant to include a value for the alt attribute of the icon. The screen reader will read “print print”, or “email email”.

Sample alt attribute encoding for icons:

Wrong:

<a href="inbox.html"><img src="icon/email.gif" /> inbox</a> //missing alt attribute

Will validate, but not really good: Screenreader will say “go to inbox inbox”

<a href="inbox.html"><img src="icon/email.gif" alt="go to inbox" /> inbox</a> //redundant alt attribute

Better, and correct:

<a href="inbox.html"><img src="icon/email.gif" alt="" /> inbox</a>

Best: seperates content from presentation

<a href="inbox.html" class="email">inbox</a>

with the css of

a.email {
    padding-left: 18px;
    background: tranparent url(icon/email.gif) no-repeat 0 0;
    }

Notes:

  • Although it is generally best to use CSS background images (including sprites) if you are going to use an icon
  • If you use a sprite, the alt altribute should describe the relevant section of the sprite. Don’t write “sprite of icons”. Instead, follow the recommendations above (all those images are actually one transparent .gif — a sprite.

Buttons, navigation and other images with text

If you are still using images for the elements in your navigation bar (shame on you!), the general rule is that the value of the alt attribute must match the text of the image. If your image says only “about”, the value of the alt attribute should also read about. Then include more detail about the destination in the title attribute of the parent anchor tag.

<a href="about/index.html" title="About the Author"><img src="img/nav_about.jpg" alt="about" /></a>.

Include the text that appears within your image as the value of the image’s alt attribute.

If you are using mystery meat navigation, you should describe relevant text in the alt, not the an explanation of the iconography of the tab. This may go against standards guidelines, but since mystery meat navigation goes against web standards, at least make your website accessible to the visually impaired, even if it isn’t accessible to sighted users.

Instead of using an <img> for navigation, use text, and make your link attractive, including using your image, via CSS using image replacement. I will include a blog entry on image replacement in the near future, since i use it a lot. In the meantime, you can look it up on any search engine.

Images, without text, that link to somewhere

Sometimes it makes sense to actually use images, without image replacement, to link to a page. For example, on Facebook, Yahoo, and maybe on your company’s about page, thumbnail images of people or avatars may link to the person’s profile. If the image is within the same link as a text link, the alt attribute should be left empty. If not, however, the link should describe the purpose of the link: <a href="bios/jane.html"><img src="img/thmb_jane.jpg" alt="Jane Smith's profile" /></a>.

This is similar to the explanation on icons above. Let’s say you do use just the email icon (from the icon example above). The correct presentation would be:

<a href="inbox.html"><img src="icon/email.gif" alt="go to inbox" /></a>

Complex, detailed images that “convey 1000 words”

Sometimes images are worth a thousand words. Maps, Graphs and Charts are examples of images that contain information necessary to understanding the message of a page but too complex to be described in under 255 characters. If the complex image is followed by text explaining or detailing the content of the image, like you might find in a journal article, then a simple alt attribute value suffices.If there is information conveyed in the image that is not explained in the text following the image and is too complex to describe in 2 sentences, like you might find in a powerpoint presentation, then you need an alternative method of explaining the content of the image to those unable to view the image. In other words, if all the data presented in your image is reiterated as text, then an alt attribute value of “graph of blood pressure by age group” suffices. If there is information that is conveyed in the image that is not reiterated as text for all of your visitors to read (and search engines to find), then you should include a longer description of the image in the form of a longdesc attribute linking to content describing in full detail the contents of your image.

The longdesc attribute

longdesc is an optional attribute of the <img> and <frame> elements. The longdesc property specifies a url for a longer description of the contents of the current frame. The longdesc attribute is coded like this::

<img src="graph.gif" alt="graph of blood pressure by age group(long description available)" longdesc="supportfiles/graphdescribed.html" />


You then need to create a separate page for your longdescription. This page should include the description and a link back the current page. The longdesc attribute’s purpose is to provide a link to a separate page where a long description is available. This link is invisible to the sighted user but available to those using screen readers.

The longdesc functionality is rarely implemented in websites despite it’s being the recommendation of the WC3 and Section 508 guidelines. For this reason, you should:

  • Include the fact that a long description is available in the alt attribute value of the image: it’s used so infrequently that even those using screen readers may not otherwise notice you included it. alt="graph of blood pressure by age group(long description available)"
  • It’s better to not use the longdesc attribute, opting instead to fully describe the contents of the image in the text for all readers. This method provides more fodder for search engines, and explains the content of your graph that even sighted users may not have otherwise noticed or derived.
  • To test whether it’s necessary, turn off images and see if all the information conveyed in the image is presented in the text in the page. If yes, longdesc is not necessary. If not, either include more descriptive text, or include a longdesc.
  • When I receive data graphs, I usually include a datatable with the data conveyed in the graph. Most charts are created using MS Excel (open MS Excel, select “Insert” > “Chart”). Ask whoever created your chart image for the original Excel file, and present the data from the spreadsheet in a data table. If you don’t have the original spreadsheet, if the chart is detailed enough to require a longdesc, then it’s detailed enough to be able to cull the data.
  • WebAIM provides more information on the longdesc attribute.

Other images

This is for all other images! If you included a picture of yourself standing with Britney Spears, your alt attribute value should minimally read “Britney Spears and me”. You can, of course, add a few more details to better describe the image if there is other relevant information presented in the image that the visitor should know.

One Response to “Alternative Text for Images: the ALT attribute”

  1. Ross Angus says:

    This is a good article, but I remember reading a page on W3C which described how alt text should be part of a sentence, which flowed naturally if the user had images turned off. Your Britney Spears example might not work in that way (but I can see your point).

    I wish I could find the original passage of text, but the W3C site is kind of a mess.

Leave a Reply