Longdesc Alternative: The details element.

The caption of the figure above includes a details element that natively exposes additional details about the photo. It is accessible with a mouse click or key press on the "Photo Info" summary button. There is some custom CSS styling applied, but no JavaScript is required. Note: At the time of this writing, the collapsing functionality of the details element is natively supported in Safari and Chrome. A JavaScript polyfill is used to retrofit other browsers (including Firefox and Internet Explorer) until they get native support.

Note: The polyfill script is a proof-of-concept and not intended for widespread use. A few people have written in stating this example doesn't work in some older browsers (IE 8 and Safari 5; both are 4 major versions out-of-date). I don't intend to update the polyfill to account for these browsers, but the proof-of-concept is sound, and could be backported to use classes instead of attribute selectors and attachEvent instead of addEventListener.

Back to the longdesc alternatives list. Image source: Texas Roots on flickr.

This page was last updated 13 August 2014.