The World Wide Web Consortium requires all images and links in a webpage to have an ALT attribute and TITLE attribute respectively. Making web pages Accessible and usable is an important part of the creation process. Overall, using ALT and TITLE attributes on everything eliminates almost all accessibility problems on many web pages. ALT and TITLE attributes also improve user experience and help assistive technology translate content for users with physical and sensory disabilities.

So far we’ve established two things: 1. It’s good to have ALT attributes and TITLE attributes defined in markup because 2. it helps improve the experience of all users when it comes to page content. But having the attributes tags in place is not enough on its own. What should web authors write in these tags? While the W3C publishes its recommendations for each, a variety of different practices are currently being practiced on the web.

The ALT Attribute for Images

The W3C states that alternate text is “for user agents that cannot display images, forms, or applets, this attribute specifies alternate text.” ALT attributes “let authors specify alternate text to serve as content when the element cannot be rendered normally.” This attribute can be inserted into IMG, AREA, and INPUT elements. In this article, we’ll focus on its use with IMG tags, possibly its most common use. If an image file cannot be displayed, at least users can see its ALT text. What kind of content should go into an image’s ALT attribute?

Good Practices

• Adding a caption describing the vital subject(s) of the image
• Adding the title of the image
• Adding an image citation / photo credit
• Keeping it short, choosing only essential words (using the LONGDESC attribute for longer descriptions)

Not So Good Practices

• Using the image’s file name
• Adding additional text that, by itself, does not describe the image accurately
• Adding empty quotes (except for elements like bullets - empty quotes are actually recommended by the W3C in cases like this)

The contents of an ALT attribute should NOT be a tooltip (even though IE displays it like this, which it shouldn’t). The text should be short (less than 100 words, as per WCAG 2.0). The text should also be relevant to the primary content so users may use it INSTEAD of the image and still gain the image’s value. In this case, it’s an accessibility thing rather than a usability thing.

The TITLE attribute for Links

The W3C states that a TITLE attribute is meant to offer “advisory information about the element for which it is set.” In short, the TITLE attribute should add additional information that compliments the linked text.

Good Practices

• Adding additional text or caption describing the link
• Adding a citation for the URL (link source, title of original article, author, all of these…)
• Keeping it somewhat short

Not So Good Practices

• Adding the exact text in the accompanying the link (this kind of a moot point since the title attribute essentially adds no new information in this case)
• Adding empty quotes
• Relying on plugins like Snap (these often rely on JavaScript and insert invalid markup into a web page. Some browsers don’t support them at all)

Content in the TITLE should add to the text inside the links, not just reiterate it. TITLE attributes should be more descriptive than ALT attributes, but not a paragraph (such as in LONGDESC attribute).

What Does It All Mean?

Roger Johansson wrote a great piece on this subject in 2004. To conclude this article, I’d like to quote his summary.

Alternate text is not meant to be used as a tool tip, or more specifically, to provide additional information about an image. The title attribute, on the other hand, is meant to provide additional information about an element…. Many people seem to confuse these two attributes…

It’s important for web designers and developers to know how to write good ALT and TITLE attributes. Practices like these should be employed into each web page element as it’s created. As Roger notes, we should be including accessibility features when initially creating web pages rather than going back to add it later.

Personally, I am glad I did some research for this article. I’ll be the first to admit that I have not followed these guidelines 100%. I learned something and hope to learn more from reader comments.

More Reading

• GAWD - Writing Good ALT Text
• D. Keith Robinson’s Take on Title Attributes
• Using Link Titles to Help Users Predict Where They Are Going
• The Image Problem and Text and Links

Share This

As most within the web community know, the World Wide Web Consortium, or W3C, is “an international consortium where member organizations, a full-time staff, and the public work together to develop Web standards,” quoted from their site. Their mission is to “to lead the World Wide Web to its full potential by developing protocols and guidelines that ensure long-term growth for the Web.”

The W3C has been publishing recommendations for web standards since 1994. While it is not limited to, these recommendations include ones for web markup (including HTML and XHTML). Using valid code in the recommended standard structure ensures interoperability (technical compatibility between systems), functionality, consistency, accessibility, and a host of other benefits.

One would think that W3C member organizations are on the forefront of web standardization efforts and practice what they preach. I’ve come across research by others and conducted my own research to help answer this question.

(more…)

Share This