The content of the element isn’t rendered visually by default (although it can be styled to do so). The SVG 1.1 specification specifically mentions the importance of providing a title for the element. The element must be the first child of its parent element, which may be one of the SVG container elements or graphics elements, or the element itself. The SVG element provides a human readable name for the SVG content, or a component within it. Hold that thought, we’ll come back to it later on. The good news is that there is something we can do about that. Of the screen readers used with these browsers, only Jaws with IE utilises this information to indicate there is graphical content on the page. IE identifies it as a graphic, and Firefox as a diagram. Of these browsers, only IE and Firefox expose the role of the element through their accessibility API at this time. Safari 6 on iOS/OSX with VoiceOver, and Chrome 30 on Android with TalkBack. All modern browsers have an accessibility API providing properties and methods that can be queried by AT.įor the purposes of this article, we’ll focus on the following browser/screen reader combinations: Internet Explorer 11, Firefox 28 and Chrome 30 on Windows, with Jaws 15 and NVDA 2014.1. It’s much more efficient when information about the DOM is exposed by the browser’s accessibility API.

Scraping the DOM isn’t an efficient way for AT to obtain information though.

SVG supports DOM 2, so information about the SVG can be programmatically examined and manipulated.

Using other methods to incorporate SVG produces less reliable accessibility results, or limits the information available to AT.įor example, SVG content pulled in via the or elements isn’t as well accessibility supported by browsers as inline SVG, and SVG pulled in via the element is limited in the information that can be exposed to AT. In other words, if your HTML uses the HTML5 doctype, you don’t need to include a namespace declaration in the tag. 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. 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.

Best accessibility screen reader chrome