Equivalent content

A brief lesson in basic design principles.

Equivalent content is content that serves the same function as that which it replaces. This equivalency is one of intent and meaning, not of visual appearance, unless the visual appearance is the meaning you are trying to convey. This is a critical and easily addressed point in making Web sites accessible.

Consider this good example of describing visual appearance:

This detail image of the hand of Michalengelo’s David clearly shows how it was disproportionately large, perhaps deliberately scaled to be more prominent when seen from a distance.

That works beautifully, in part because it goes on to explain the importance of the visual thing described. If it had only said, “Detail image of the hand of Michalengelo’s David” it would be much less useful. Unfortunately, it is often this latter version we see in Web design. And, even then, the marginal utility is still only the exception to the rule. Normally, images in a Web page and descriptions of the visual appearance of the same are not at all equivalent because the point in not what the image is, but what function it serves in the page. That is the equivalence, function, not appearance.

Under normal conditions, it is really annoying to be looking for what something is and find a description of what it looks like. For instance (and yes, this was a real piece of equivalent content for an image somewhere):

Image of the company logo with the corporate motto forming a circle around it.

This information is pretty much useless to anyone trying to figure out the relation of the image to the contents of the page. It doesn’t even tell you who the company is. And if it is that logo in the top-left corner of the page, there is a pretty good chance that a better text description of it might very well be “Return to top of site.”

Let’s take it a step further and imagine a side menu with graphical buttons (I know, how 1990s) where each button has the following alternative text:

Blue button with white text.

Just try navigating that one when the images don’t load.

To clarify how bad bad equivalent content really is, let’s imagine the following conversation:

Bob: Hey, that’s a great looking car you bought. I’ve never seen one like it. What kind is it?

Phil: It’s a blue one, with white leather seats.

Bob: I can see that, but what kind is it?

Phil: Well, it’s a sleek little blue sports coupe.

Bob: Very funny Phil. Really, who makes it?

Phil: The company that makes this sleek little blue sports coupe.

Depending on the amount of beer involved, Bob may or may not hit Phil at this point. This is the sort of thing that happens when you use alt attributes to describe what something pretty obviously is, instead of providing the needed, contextually relevant information. We really don’t need badly chosen descriptions mixed with beer leading to interpersonal violence.

Perhaps another example is in order, one more in keeping with the nature of the infraction that led to this post.

Bobbi: Hey, Philomena! I hear you got a new job.

Philomena: Yeah. I really like it.

Bobbi: Cool, where’s it at?

Philomena: The company with the logo that has the corporate motto forming a circle around it.

Bobbi: Oooo-kay.

Bobbi moves slowly away from Philomena, and Philomena later wonders why Bobbi won’t go clubbing with her anymore. Another friendship destroyed by bad descriptions, and possibly too much beer.

You get the idea.