Longdesc & Other Long Image Description Solutions — Part 2 of 2: The Solutions

Tweet

In the first part of this two-part series, the longdesc attribute was examined including its definition, criticism and support, and lack of browser support. In Part 2, let’s now discuss how to implement longdesc, some alternatives, and few other ideas to provide a long description for an image.

Implementing It

The Basics

The basics for using longdesc is straight forward. The attribute is added to an image element and the value is a link to the description.

<code><img src="/images/chart.png" alt="chart" longdesc="description.htm" /></code>

To make this process easier, there’s a new service ObjectDescription which will host the HTML page containing the description for free.

Note that since longdesc takes a URI as a value, so an anchor such as #description should be valid value in the same way that href="#description" is valid. Never however enter the description text itself in the value.

A Standard Text Link

Another way to provide a long description, and avoid the longdesc support issues, is to simply add a regular text link right after the image. The text link points to the external description, similar to longdesc.

<code><img src="/images/chart.png" alt="chart" /> 

<a href="description.htm">View long description of this chart.</a></code>

A disadvantage here is that the text link is plainly visually obvious; this may be beneficial for accessibility and usability, but may be unwanted in the opinion of the designer and website owner (may be considered distracting). Another issue with this method is that it doesn’t semantically or programmatically associate the description with the image (not “programmatically determined“). This is a huge hole when it comes to working with assistive technology.

In case you’re wondering, the D-link is an old-school method where the “D” stands for description. It’s essentially the same technique as the standard text link, but the link text is only the character “D” rather than a more verbose text link such as the example’s “View long description of this chart.” This can also be done using a linked 1-pixel transparent image with an alt attribute of “D” or “description”. The D-link method is no longer recommended.

ARIA DescribedBy

The aria-describedby attribute is an option for defining a long description, but as pointed out in Part 1, there are issues with this method. In order to implement it, an aria-describedby attribute is added to the image. The value of the attribute is set to the id of the container of the long description text, creating an association between the description and the image. This is similar to the method for associating a label with a form element.

<img src="/images/chart.png" alt="chart" aria-describedby="desc" /> 
<p id="desc">[content of long description here]</p>

A major issue here is that the text description must be on the page. A technique to get around this is to replace the long description content with a text link to the external long description page, the same link you’d use in the longdesc attribute. This way, the content of the long description is not needed on the same page.

<img src="/images/chart.png" alt="chart" aria-describedby="desc" /> 

<a id="desc" href="description.htm">View long description of this chart.</a></code>

Hybrid Is Ideal

A hybrid of the techniques above seem to be an ideal solution, at least for now. The longdesc attribute is used, and a standard text link is added, and the aria-describedby attribute is implemented. So let’s take the second ARIA example above, and add longdesc. The result is that the long description is accessible for all cases: browsers supporting longdesc or not, technology supporting ARIA or not, blind or sighted users, mouse or keyboard users, etcetera.

<img src="/images/chart.png" alt="chart" aria-describedby="desc" 
   longdesc="description.htm" /> 
<a id="desc" href="description.htm">View long description of this chart.</a>

Chart with text link to long description.

Now, if desired, you can hide the link off-page from sighted users with CSS. CSSquirrel does this for its comics (read more in CSSSquirrel’s Alone In The Pitch Black Dark).

Other Solutions

Add Missing Behavior in Code

A excellent solution to the browsers’ lack of longdesc support is demonstrated in a jQuery Accessible Longdesc Plugin by Dirk Ginader. (You can find Ginader’s source code on GitHub.) The script creates a visual indication and link when longdesc is available. When activated, it replaces the image with the long desciption; this way a new page or window doesn’t need to be opened. The desciption can then be closed, restoring the image. It’s easy to implement, the JavaScript is unobtrusive, and the links are keyboard accessible; brilliant!

Chart with focused link.

Long description of chart displayed in place of chart; close link at end.

Note: image screeshots have been resized slightly to fit the article.

Use CSS Instead of Image

One way to avoid the entire long description issue is to not use an image in the first place. Case in point, if you are planning to display a graphical chart, an option is to markup a data table or definition list, then use a CSS technique to create a stylish appearance close to what graphic would bring. CSS legend Eric Meyer provided samples of this method a few years back; check out his great examples with table markup and a definition list.

Example of chart created with CSS.

Visualize Plugin

In the article Creating Accessible Charts from the Nomensa blog, Dan Stringer explains another solution for charts and graphs, but a different approach. We start with a properly marked up data table, like Meyer’s CSS example above, but the similarities end there.

A graphical chart is generated with a clever jQuery plugin jQuery Visualize by the Filament Group. The chart is built with HTML5 canvas and provides a Google/VML solution as a fallback. Now we have a table and a chart displayed. The chart itself is not accessible, but the table is. To hide the table from sighted users, a classic CSS technique is used in conjunction with a Modernizr-like method for displaying the data table when JavaScript is not available (since JavaScript is required to generate the chart). Visualize also injects a couple ARIA attributes (role and aria-label) to assist screen reader users determine what’s what.

Example of chart created with jQuery Visualize.

Summary

The longdesc image attribute is easy to implement but is not supported well. Other methods such as text links and ARIA can be used to achieve a similar result but may not be fully supported either or may not be aesthetically pleasing. Today, the best way to implement a long description for an image, when needed, is to use a hybrid technique with text link, longdesc, and ARIA. Other techniques have surfaced (especially for charts), but until the W3C, browser vendors, and web authors play nice together, there will continue to be fragmented and partially supported solutions which is a loss for everyone.

Further Reading

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Jimallan

    “The
    longdesc
    image attribute is easy to implement but is not supported well.”

    How do we get support for ‘longdesc”, how about contacting the browser manufacturers and asking that they support it. Perhaps if enough of us ask, we might get support for the long neglected but very useful longdesc attribute.

  • http://www.catherine-roy.net Catherine Roy

    Hi Dennis,

    Great follow-up. A few comments :

    I think the new ObjectDescription service set up by vlad, while full of good intentions, is far from ideal. There is no reason to have to resort to 3rd party services for this kind of thing and can even present some risks that I already went into in comments to the post that vlad wrote to introduce this service.

    Also, while the “hybrid method” may enable you to cover all your bases to cater to every possible variant of support out there, I think it is not ideal either as it is a lot to ask from *most* developers in general and too much to ask those often charged with putting content online, i.e. content editors, who usually have zero skills and are working with far from adequate tools.

    I continue to believe that @longdesc is a simple and elegant solution. The need is in getting authoring tools to better support @longdesc and of course, user agents, though on that front, much progress has been made.

    Finally, I really like @ginader’s plugin. I think these types of solutions can really help get more love for @longdesc.

    Cheers !

    • http://twitter.com/dennisl Dennis Lembrée

      Agree that the hybrid method is not simple, but that’s the price we pay for poor browser support. With just a little effort, it can work very well.

  • Jared

    aria-describedby doesn’t really work as you describe. A screen reader would simply read the text ”
    View long description of this chart” when it encounters the image, but it would not present the link itself. This would be quite confusing as there’s no functionality to get to the description. In other words, it reads the content that is contained WITHIN the aria-describedby element, not the element itself.One would think this could be addressed by placing the link inside a that is referenced by aria-describedby, but current screen readers only read the text content of referenced elements – they don’t read structure or functionality (such as links, lists, etc.), so this doesn’t really work either.To make matters worse, neither JAWS nor NVDA support aria-describedby on images anyway.Additionally, this is quite a stretch of the use of aria-describedby anyway. The description of the image is not

    View long description of this chart” or a link, yet this is what the markup is suggesting. Any implementation of aria-describedby except one that references an element that contains the actual description is probably flawed.

    • http://twitter.com/dennisl Dennis Lembrée

      Thanks for the clarification on that Jared.

  • Eleg

    Hi Dennis,

    What about using longdesc here instead ?

    Isn’t just a special case ?

    • Eleg

       (comment aggressively automatically filtered !  ;-)
      Hi Dennis,

      What about using «object type=”image/png”»longdesc
      here«/object» instead
      ?

      Isn’t «img /» just a
      special case ?

  • http://www.quasittehr.com Terry Shawl

    I am constantly browsing online for posts that can facilitate me. Thx!