Scalable Vector Graphics (SVG) exists in a quantum state of accessibility. Which is to say that SVG is both accessible and inaccessible at the same time. Happily, there is no SVG uncertainty principle. We know which aspects of SVG are accessible to whom, which are not, and what we can do to improve both.
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. This article looks at ways to make SVG 1.1 content as accessible as possible, with glimpses into the possibility space of SVG 2.0 accessibility.
This may seem like a strange thing to say, not least in an article that’s about SVG to begin with. The fact is that one of SVG’s most compelling characteristics is also one of its most accessible. SVG content is scalable, and more to the point it scales without a reduction in visual quality. This makes it extremely versatile from a development point of view, but it also means that people with less than 20/20 vision can enjoy crisp and clear images no matter what screen size and resolution they use.
Use inline SVG
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.