Jonathon Delacour the heart of things

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