Accessible SVG alternative to html:longdesc.

image/svg+xml Life expectancy 2007 Peter Collingridge, accessified by James Craig 36 to 45 46 to 55 56 to 65 66 to 75 76 to 85

Back to the longdesc alternatives list.

Support Details

See a demo video of accessible SVG on iOS (M4V file) outlined in a WebKit post on ARIA and the WebKit Accessibility Inspector.

SVG accessibility (in this case applied using WAI-ARIA) is relatively undocumented, so it may work in other implementations, but as of Sept 2012, I only knew for certain that it worked in Safari on Mac OS X (Mountain Lion 10.8) and iOS 6. On OS X, enable VoiceOver, navigate to the image, manually "interact with" the group, and then use standard linear navigation key combos. Alternately, enable the Trackpad Commander and touch to explore the map. If you don't know how to use VoiceOver, search for VoiceOver in System Preferences, and click the "Open VoiceOver Training" button.

Update: More cross-browser support details are covered by Leonie Watson in her article Tips for Creating Accessible SVG, 6 May 2014.

Credit: The SVG document content is based on one of Peter Collingridge's choropleth maps of Africa, to which I applied some basic ARIA roles and attributes for accessibility.

This page was last updated 12 August 2014.