Friday 13 December 2002

Saved by the “title” attribute

On the train into the city this morning I suddenly realized that, in my previous post about temperaments and personality types, I’d committed one of the mortal sins of accessibility. By merely graying-out the characteristic traits and behaviors for each personality type that didn’t seem to match my behavior, I violated Guideline 2 of the Web Content Accessibility Guidelines:

Don’t rely on color alone.

Ensure that text and graphics are understandable when viewed without color.

If color alone is used to convey information, people who cannot differentiate between certain colors and users with devices that have non-color or non-visual displays will not receive the information. When foreground and background colors are too close to the same hue, they may not provide sufficient contrast when viewed using monochrome displays or by people with different types of color deficits.

Checkpoints:

2.1 Ensure that all information conveyed with color is also available without color, for example from context or markup. [Priority 1]

Since the grayed-out text is meaningless to users with non-visual displays, I needed another means of conveying the idea that I don’t believe these characteristics or behaviours apply to me. This seems like a perfect case for the all-purpose title attribute:

[The title] attribute offers advisory information about the element for which it is set.

Unlike the TITLE element, which provides information about an entire document and may only appear once, the title attribute may annotate any number of elements. Please consult an element’s definition to verify that it supports this attribute.

Values of the title attribute may be rendered by user agents in a variety of ways. For instance, visual browsers frequently display the title as a “tool tip” (a short message that appears when the pointing device pauses over an object). Audio user agents may speak the title information in a similar context.

All I had to do was to add the title attribute to the <li> tag for each grayed-out list item so that instead of <li class="grayed-out"> it would read <li class="grayed-out" title="grayed out">.

Fixed, thank goodness… since next week all my posts will be devoted to Joe Clark’s Building Accessible Websites: first a book review, then an extended conversation with Joe about accessibility matters.

Update. Commenting on this post, Lou Brothers correctly suggested that my title attribute of “grayed out”—while conveying some information to those not able to discern the color differentiation—misses the point in its implementation:

“Greyed out” as a phrase conveys non-accurate information. A better approach would be a descriptive phrase such as “This personality type characteristic does not apply to me”. This conveys the same information that you’re offering sighted users with color monitors with css1 support in their browsers.

This certainly isn’t an easy thing to take into account when coding a post or a site - as we tend to think within our frame of reference: “If I couldn’t see the color, all I’d need to know is that its greyed out.” - but a truely non-sighted user might not find that useful at all without a full understanding of sighted users tendencies to rely on “greyed out” items representing non-applicable information.

I was relying on the phrase “grayed out” being read in the context of the total post but Lou’s point is entirely valid since some sighted users at least could detect the meaning of the “graying out” without reading the entire post. I’ve followed Lou’s suggestion and modified the title attribute to read: “I don’t believe this trait or behavior applies to me.”

Permalink

Comments

While I agree that your title attribute now conveys some information to those not able to discern the color differentiation, I think you missed the point a bit in your implementation.

The title attribute should not read "Greyed out".

"Greyed out" as a phrase conveys non-accurate information. A better approach would be a descriptive phrase such as "This personality type characteristic does not apply to me". This conveys the same information that you're offering sighted users with color monitors with css1 support in their browsers.

This certainly isn't an easy thing to take into account when coding a post or a site - as we tend to think within our frame of reference: "If I couldn't see the color, all I'd need to know is that its greyed out." - but a truely non-sighted user might not find that useful at all without a full understanding of sighted users tendencies to rely on "greyed out" items representing non-applicable information.

Yikes, so... find and replace?

Posted by: Lou on 13 December 2002 at 04:10 AM

Thanks Lou, responses like yours make me glad I have comments enabled. I've amended the title attribute as suggested and updated the post.

Posted by: Jonathon Delacour on 13 December 2002 at 07:59 AM

Speaking of which, may I say how grateful I am that you've changed your visited and new link colors? The previous grey color for visited links was a bit hard to see on my TiBook at times. (TiBooks being the older sibling of the computer you'll never buy.)

At some web sites, I feel like Harry Potter, having to wave my mouse cursor around like a magic wand in order to discover the links. Not your weblog, of course.

I am looking forward to the accessibility reports. I can use this as an opportunity to see what else I'm missing from the new designs.

Posted by: Burningbird on 14 December 2002 at 06:59 AM

Thanks, Bb. I switched back to standard purple for the visited links and jazzed up the rollovers. Funny you should mention hunting for the links. A client recently asked me to critique a Web site and the first thing I noticed was that there was no way to distinguish the hypertext links at all: the link text was identical to the surrounding text.

When I asked the designer about this, he said to me: "Well, I've used the a:hover selector to underline the links when the user rolls over them."

"But how does the user know to roll over a link, given that they're invisible?" I asked him.

"Hmm," he replied. "I can see that might be a problem."

Posted by: Jonathon Delacour on 14 December 2002 at 02:28 PM

This discussion is now closed. My thanks to everyone who contributed.

© Copyright 2002-2003 Jonathon Delacour