In the first part of this two-part series, the
longdescattribute 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.
longdescis straight forward. The attribute is added to an image element and the value is a link to the description.
Note that since
longdesctakes a URI as a value, so an anchor such as
#descriptionshould 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 LinkAnother way to provide a long description, and avoid the
longdescsupport issues, is to simply add a regular text link right after the image. The text link points to the external description, similar to
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
altattribute of “D” or “description”. The D-link method is no longer recommended.
aria-describedbyattribute 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-describedbyattribute is added to the image. The value of the attribute is set to the
idof 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
labelwith a form element.
longdescattribute. This way, the content of the long description is not needed on the same page.
Hybrid Is IdealA hybrid of the techniques above seem to be an ideal solution, at least for now. The
longdescattribute is used, and a standard text link is added, and the
aria-describedbyattribute 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
longdescor not, technology supporting ARIA or not, blind or sighted users, mouse or keyboard users, etcetera.
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).
Add Missing Behavior in CodeA excellent solution to the browsers’ lack of
longdescsupport 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
Note: image screeshots have been resized slightly to fit the article.
Use CSS Instead of ImageOne 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.
Visualize PluginIn 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.
longdescimage 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.
Longdesc & Other Long Image Description Solutions — Part 2 of 2: The Solutions Reviewed by Aamir Pathan on 1:42 PM Rating: