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.
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
- 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.