Making Accessible SVG

Dean Jackson - W3C

The Web is a rich interactive environment — it is full of text, images, audio, video and animations. It's also designed to be an environment for everybody, regardless of age, physical, intellectual and cognitive disabilities. This fundamental aspect of the web is referred to as "Accessibility".

Many people think that accessibility simply means making web content available to people with disabilities, such as blind users. However, this is a limited view of the area. Accessibility means making Web content and the Web experience available to as many people as possible, whether they have a disability such as a vision, motor or learning impairment, users with slow network connections and slow computers that choose "text-only" pages, users accessing the Web with mobile phones or PDAs with limited bandwidth, memory and screen resolution or software agents that do not "see" the web page in the same way as a human.

Can SVG be accessible?

Yes, although some web designers mistakenly think making graphics such as SVG accessible requires generating equivalent text-only pages or creating visually unappealing images. However, making the content more accessible does not lessen the experience for the users that do not need accessible content, and greatly enhances the experience for the users that do.

Why should SVG images be made accessible?

Many countries have passed legislation that requires Web sites to be accessible. In most cases, the legislation applies to all the content on the site, including the graphics, animations and video, including SVG.

Beyond the legal reasons, there are many practical reasons. Accessible SVG means that a greater portion of the potential Web audience can access the Web site. Examples are blind users that can skip introduction animations and send graphical electronic greeting cards to friends. Also, designing for accessibility typically produces a more usable Web site.

You can also consider a search engine, such a Google, to be a particular class of user that can benefit from accessible content. Most search engines primarily index textual content — they cannot easily read text within an image or understand the audio stream of a video. If the graphics on a site are more accessible then search engines can use the accessible content to direct users to the site. Interestingly, the effort required improving the accessibility of SVG is less than many would expect. With only a small number of simple techniques, there is a large return in accessible content.

How can SVG be made accessible?

Unfortunately many of the Web Content Accessibility tips and guidelines were originally authored towards textual content. Many aspects are still relevant to SVG, and there are a number of simple techniques for SVG that can greatly enhance accessibility. Examples include:

The presentation will go through a number of the techniques, with examples. By following the simple techniques, the content developer should easily be able to produce more accessible SVG.