

Putting role="img" on the svg element ensures it is identified as a graphic. It is possible to enhance the information exposed through the browser accessibility APIs with a handful of ARIA attributes. In all other browser/screen reader combinations the SVG is ignored. NVDA and Internet Explorer present the role, title and desc, but support is erratic with multiple images announced and repetition of the title and desc. Jaws 15 and Internet Explorer 10 is the best combination at present, although nested SVG images are not well supported. SVG title and desc support in screen readers Expected result The desired behaviour is that the screen reader can navigate to the SVG image, identify it as an image, and that the accessible name and accessible description are announced. The fact that information is available through the accessibility API doesn’t mean that a screen reader automatically recognises it though. Screen reader support is largely dependent on the information exposed through the browser’s accessibility API. Screen reader support for SVG accessibility The computation issue has been resolved but is not yet available. Firefox 25 (on Windows) is close, but it computes the accessible name and accessible description the wrong way around. Internet Explorer 10+ (on Windows) is the only browser to correctly expose both the title and desc elements and the SVG role through its accessibility API. SVG title and desc element mapping in browsers Expected result Testing across recent browsers indicates that the title and desc elements, and the role of the SVG element, are not represented consistently in browser accessibility APIs.


The browser’s accessibility API should also expose the role of the SVG, so screen readers can correctly identify it. In the browser’s accessibility API, the title and desc elements should map to the accessible name and accessible description respectively. Note: Thanks to Adobe for commissioning the research and for permission to share the data! SVG includes two elements for providing short and long text descriptions: The title and desc elements.Ĭircle Large red circle with a black border Things are set to improve with SVG2, but ARIA can be used now to improve the accessibility of simple SVG. SVG1.1 accessibility support is limited in browsers and screen readers.
