Accessibility Tip:
Supply Long Descriptions

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

One of the simplest ways to make your page more accessible to visitors using assistive technologies like screen readers is to add alternative text descriptions to your Web pages. But ALT text has a size limit: sometimes you just have to say more about an image. That's why the long description (LONGDESC) attribute was added to HTML.

When ALT Isn't Enough

Sometimes you'll just need to say more about the image than is possible with ALT text descriptions. 250 characters sounds like a lot until you start describing a complex graph or other important image. Also, there's no way to format your ALT text descriptions: you can't select the font, line breaks, or add any other HTML formatting instructions.

That's why both HTML 4 and XHTML support the LONGDESC attribute. This attribute won't appear as a pop-up tooltip like ALT text does in some browsers. Instead, LONGDESC is an actual link to another Web page that contains the complete text description of the image or non-text page element.

Both ALT and LONGDESC attributes are considered critical components of a page's overall accessibility level. Both are Priority One attributes according to the World Wide Web Consortium (W3C).

Here's how the W3C's Web Content Accessibility Guidelines section describes both attributes:

Adding Descriptive Text

Defining a LONGDESC attribute requires a little more work than basic ALT text descriptions. That's because it actually refers to another Web page, so you'll have to create a separate HTML page that contains the longer descriptive text.

But the basic syntax needed to add it to the IMG tag is simple:

Creating a LONGDESC value is a three-step process:

So now you're probably muttering something like this: "As if I don't already have ENOUGH to do, now I'm supposed to create a whole new page with descriptive text for every image?"

Settle down. You probably won't have to use the LONGDESC attribute much at all unless your Web site is filled with complex charts and graphs. Most sites only need to use it once or twice on the whole site - if at all.

But it's like carrying a spare tire in your car. 99.9% of the time, you don't need it and it seems like extra weight. But when you really need a spare tire, nothing else will do!

Browser Support Issues

As useful as this attribute is, you'd think that browser manufacturers would have added support for it years ago, but that hasn't happened. Normally, the most frustrating thing about browser compatibility is spotty support. You get a broken page in one browser, but the same page looks fine in another one.

Our browser compatibility tutorial explains why that happens and alerts you to common problems. But with LONGDESC, the problem isn't spotty support, but complete lack of support!

However, it's one of those techniques that doesn't break anything now and prepares your site to function even better in future browser versions that will support LONGDESC.

Adding D-Links To Images

In the meantime, consider this interim solution that's also noted at the W3C Web site:

"For user agents that don't support "longdesc", provide a description link as well next to the graphic."

In the previous coding example, we defined an image with an ALT text description and a LONGDESC link. Here, we'll add a "description link" (called a D-Link) as recommended by the W3C and the US Government's Usability and Accessibility Web site:

Just add a short text link after your image. Write the text link as a capital letter D enclosed in two brackets: [D].

This makes your descriptive text accessible to all visitors. The downside is that the D-Link is visible on the page and may be distracting to some visitors.

Some Web designers use a single-pixel gif as a D-Link instead of creating a text link. That's small enough that it won't break the page layout. Visitors can also tab to it, so it's useful for keyboard navigation. An image D-Link would appear next to the larger image, but be an image link instead of a text link:

Note that the HREF value "longerText.html" is the same for both images. This gives visitors access to the same page whether or not their browsers support LONGDESC.

It just takes a few minutes and a little extra code to increase the accessibility level of your page. If you think that visitors with disabilities aren't worth your time, consider that you're also preparing your Web site for other technologies as well: PDAs, cell phones, and other wireless technologies where text descriptions are often far more useful than complex, slow-loading graphics.

Get more information about Web site accessibility at NetMechanic's Accessibility Resource Center.