Léonie Watson is a digital accessibility consultant, member of the W3C HTML Working Group and HTML Accessibility Task Force.

Léonie's articles

  1. Tips for Creating Accessible SVG

    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.

    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. 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.

    Use SVG

    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.