Longdesc alternatives in HTML5

This page is intended to be a resource documenting alternatives (hopefully better alternatives) to longdesc in HTML 5. It is a work-in-progress and I will link example content below as I create it. If you have examples you'd like to contribute, please email me.

For more information or background, please refer to the thread on the W3C mailing list archives.

Recommended Approaches

• Figure with details element: Arguably the best solution because it is discoverable, accessible, and works without JavaScript in HTML5. The details element can easily be polyfilled with JavaScript for older browsers or browsers that do not yet support the element natively. Results in a visible toggle that is both discoverable and accessible to users of both mainstream and assistive technologies (even works in Mosaic and Lynx)... Update: Steve Faulkner submitted a similar idea that does not use figure: flip box component demo.
• Accessible vector graphics in SVG: Renders in all modern browsers, but only applicable to vector content. At the time of this writing, the accessibility of SVG works in WebKit and other browsers; browser vendors that do not support SVG accessibility have informally committed support. Localized, accessible vector graphics are vastly superior to raster images of charts or graphs for a number of reasons. Update: Derek Featherstone also created an accessible SVG map of the United States.
• Accessible bitmap using SVG wrapper: Raster images in SVG wrapper, optionally using an embedded data URI. Same technique as vector graphics above, but keeps raster pixels and accessible content in the same file resource.
• Standard link inside figure caption: Literally provides identical functionality, but unlike longdesc, it is discoverable and works for all users in all browsers, even Mosaic and Lynx. Similar example: long description using link associated via aria-describedby from the HTML5 Accessibility site.
• More examples from the HTML spec: The HTML spec lists a number of examples. None of them rely on a bolt-on approach.

Other examples that are known to work today

• Hidden iframe technique: Much better supported than longdesc, but kind of hacky. Would rely on JavaScript to be discoverable to mainstream users.
• Image map <map usemap> with area elements <area> defining each sub-section of the image.
• EPUB footnotes: widely supported, but only applicable to book content.
• MathML: varied support across implementations, and only applicable to math content.

Examples that are valid in HTML5, but are generally unsupported

• Accessible canvas techniques
• Shadow DOM techniques
• Media query request techniques

This page was last updated 13 August 2015.