Accessible SVG alternative to html:longdesc.

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.