[wp-hackers] The alt tag

Craig nuclearmoose at gmail.com
Wed Feb 15 17:03:12 GMT 2006

My response is not very clear, in retrospect, so I'm including a portion of
a CommuntyMX article written by Zoe Gillinwater:

Alt text should not *describe* the image, it should *replace* it.

The rule that deals with alt text in Section 508 is 1194.22 (a):

A text equivalent for every non-text element shall be provided (e.g., via
"alt", "longdesc", or in element content).

Source: Section

The WAI's Web Content Accessibility Guidelines (WCAG) 1.0 checkpoint that
deals with alt text is 1.1:

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 and programmatic objects, ASCII art, frames,
scripts, images used as list bullets, spacers, graphical buttons, sounds
(played with or without user interaction), stand-alone audio files, audio
tracks of video, and video. [Priority 1]

Source: w3 <http://www.w3.org/TR/WCAG10/#tech-text-equivalent>

Both of these guidelines state that the alt text should be an equivalent,
not a description. In other words, the alt text should fulfill the same
function that the image does by presenting the message the image is supposed
to convey in a textual instead of visual way.

For instance, let's say you use an image of a magnifying glass as a link to
your search page. A description of this image would be "magnifying glass,"
but this text does not help a non-visual user deduce what the purpose of the
magnifying glass image is. Instead, adding "search" as the alt text
adequately describes the meaning or purpose of the image, rather than the
image itself. Similarly, if you use an image of an arrow as a link to the
full text of an article, use "read more about Article X" as the alt text
instead of "arrow."

Making sure that images have text equivalents rather than descriptions also
means it's unnecessary to include words such as "image of" in your alt text.
So, instead of using "Widget Company logo" as the alt text for your logo
image, just use "Widget Company." That's a good text equivalent for the logo
and is all the non-visual user needs. Similarly, for the picture of Widget
Number One on your page, just use "Widget Number One" as the alt text, not
"image of Widget Number One."

Providing good text equivalents instead of descriptions becomes more
difficult with more complicated graphics, such as photos. Again, think about
the message the image is supposed to be communicating to your users, rather
than what the image looks like.

Let's say your web page is selling dehumidifiers, and on the page you've
included a picture of mold to illustrate the dire consequences that could
arise if a customer does not buy your dehumidifier. You could describe this
image ("Black mold spores cover the lower portion of a wall and baseboard"),
but not only would this be rather gross, it would not convey the same
message to non-visual users that it does to visual users. Instead, put the
image's purpose as the content of the alt attribute. "Excess humidity can
lead to costly and unhealthy mold" might be better alt text, or "ABC
Dehumidifiers reduce the chances of unhealthy mold in your home."

On 2/15/06, Craig <nuclearmoose at gmail.com> wrote:
> Jason said:
> "On the flip side, if undefined, wordpress probably should populate the
> alt tag with the title specified in the image uploader."
> My preference would be simply empty quotes -- alt="" because semantically
> an alt tag is not a title, it is information about the image. That is why
> there is a title tag. :-)
> Craig.
> Nuclear Moose.

More information about the wp-hackers mailing list