OpenA11y Evaluation Library

Long description for complex images

Rule ID Image 6
Conformance Required
Definition Complex images, charts or graphs (e.g. images generated from tabular data) must have long descriptions to provide an additional detailed description of the information conveyed by the image.
Purpose
  • A long description should provide more information and detail than the text alternative for the image (e.g. alt attribute).
  • Images can convey a wide range of content and be used for many different purposes on a web page, from purely decorative to complex graphics helping people visualize the features and relationships of large data sets.
  • All users can benefit from long descriptions by providing another modality for the author to convey information contained in the image and by providing search engines with information to more accurately return relevant results.
  • Informative images of photographs or paintings can often benefit from long descriptions.
  • Informative images like charts or graphs need long descriptions to describe the data used to create the chart or graph.
Conformance Required
WCAG Success Criteria

Success Criterion 1.1.1 Non-text Content

Other Related Success Criterion:

Rule Category Images
Rule Scope Element
First Step no
Techniques
  • Ideally, the long description of an image should be accessible to all users by including it as part of the page content, and in close proximity to the image it describes.
  • Use the aria-describedby attribute to reference one or more ids on the page that contain the long description. When this technique is used, assistive technologies extract the text content of the referenced ids and make it available as concatenated, unstructured text (i.e., stripping out any list markup, links, paragraphs, etc.).
  • Use the title attribute to provide a long description.
  • Use the alt attribute or equivalent markup to indicate the presence and location of the long description when it consists of structured content (e.g. tabular data, lists, links) in close proximity to the image. For example, alt="..., for more information view the following data table".
  • Use the longdesc attribute, which requires a URI value, to link to a long description for an image. NOTES: (1) The URI can be an internal link on the same page as the image, or a link to an external page or a fragment thereof. (2) There is a discoverability problem with this technique in that the description will typically only be available to screen reader users. Therefore, until browser implementations for longdesc have improved, alternative techniques that enable all users to access the long description are preferred.
  • Use techniques that allow all users to view the long description. For example, the summary/details elements can be used when the author prefers the detailed description to be initially hidden from users.
Information Links