Tips for Creating Accessible SVG

Tips for Creating Accessible SVG

A different form of accessible data – a 3d topographical map of Deventer, Netherlands. Photo: Ronald Rugenbrink

[…]

To recap: SVG 1.0 was released by the W3C in 2001. SVG 1.1 came along in 2003, and SVG 1.1 2nd edition in 2011. SVG 2.0 is currently a W3C working draft.

SVG 1.1 includes several features that lend themselves to accessibility, but SVG 2.0 will take accessibility to another level. Whilst SVG 1.1 has good cross-browser support, SVG 2.0 is still too early in its lifecycle for browsers to have implemented support.

[…]

The best way to make SVG accessible to Assistive Technologies (AT) like screen readers and speech recognition tools is to put it directly into your HTML. It’s much cleaner (in code terms) to do this with HTML5 than it was with HTML4.x, because the HTML parser automatically switches mode and puts the SVG elements and attributes into the correct namespace.

In other words, if your HTML uses the HTML5 doctype, you don’t need to include a namespace declaration in the <svg> tag.

[…]

The SVG element provides a human readable name for the <strong>SVG</strong> content, or a component within it. The <title> element must be the first child of its parent element, which may be one of the <strong>SVG</strong> container elements or graphics elements, or the <<strong>svg</strong>> element itself. The <strong>SVG</strong> 1.1 specification specifically mentions the importance of providing a title for the <<strong>svg</strong>> element.</p><p class="hellip">[…]</p>