SVG

Summary

Ensure SVGs are accessible by following WCAG techniques for visual content, text and scripting.

Techniques

Identify the default language and any language changes using the lang and xml:lang attributes [[WCAG-3.1.1]]
Provide a title using the title element [[WCAG-2.4.2]]
Provide a description using the desc element [[WCAG-1.1.1]]
Use ARIA roles, states and properties to make scripted components accessible [[WCAG-4.1.2]]
Provide sufficient contrast between foreground and background colors. [[WCAG-1.4.3]] and [[WCAG-1.4.6]]
Provide alternatives to color for identifying information. [[WCAG-1.4.1]]

For a detailed list of accessibility features supported by SVG, refer to Appendix D of SVG 2.0

Examples

Example 1 — Default language specification

<svg xmlns="http://www.w3.org/2000/svg" xml:lang="en" lang="en">
   …
</svg>

Example 2 — Language override

<svg xmlns="http://www.w3.org/2000/svg" xml:lang="en" lang="en">
   …
   <text … >I think therefore I am...</text>
   <text … xml:lang="fr" lang="fr">Je pense donc je suis...</text>
   <text … xml:lang="it" lang="it">Penso dunque sono...</text>
   …
</svg>

Example 3 — Including an SVG title and description

<svg
	 xmlns="http://www.w3.org/2000/svg"
	 xml:lang="en" lang="en">
   <title>The New EPUB Logo</title>
   <desc>
	  The EPUB logo is a lower-case letter E that has 
	  been tilted 45 degrees to counter-clockwise so 
	  that it appears to be sitting in balance on its 
	  lower-left corner. The E is drawn as a single, 
	  unclosed line of green starting at the centre 
	  of the image, moving to the outer edge and then 
	  continuing around in a box-like pattern. The
	  external corners have all been rounded.
   </desc>
   …
</svg>

Example 4 — A decorative SVG

<svg
     xmlns="http://www.w3.org/2000/svg"
     xml:lang="en" lang="en"
     role="presentation">
   …
</svg>

Example 5 — Adding a title to a link

<a href="http://www.ontario.ca">
   <title>Ontario government web site</title>
   <g …>
      …
   </g>
</a>

Frequently Asked Questions

What is the best method for embedding SVGs in HTML?

The best answer is to embed the SVG markup directly in the HTML document, as it exposes the SVG's DOM to assistive technologies. As embedding is not often feasible, the next best option is to use the object element. Some browser and assistive technology pairings have been reported to have issues with this approach (e.g., not exposing the DOM), but it is generally accessible and a fallback can be provided inside the object element.

Although an iframe element might seem like a better choice, the downside of this element is that if the user agent does not support SVG, there is no effective way to provide a fallback.

The img tag should only be used for SVGs that a user does not need to interact with and that have no dynamic components (scripting or animation).

Explanation

Language

The language of any text content contained within an SVG image should always be set to ensure that assistive technologies render such content properly.

When attached to the root svg element, the xml:lang attribute identifies the default language of any text content in the image. The lang attribute should also be specified in case the SVG is not interpeted by an XML parser.

The xml:lang and lang attribute can also be attached to individual components and text elements within the image to designate that they contain prose in a different language than the default.

Title and Description

SVG images that are significant to a publication should always include embedded titles (title) and descriptions (desc) to aid users of assistive technologies.

The description provided should be commensurate with the information contained in the image: use alt-like descriptions for simple images and longer descriptions for complex ones.

If an SVG image is purely decorative, do not include a title or description. The SVG element should additional be identified as presentational using the ARIA role attribute.

All significant graphical components within the SVG image should also contain their own title and/or description to improve the overall accessibility of the image.

Text Elements

When including text content in images, use text elements so that the prose is available to assistive technologies. When distorting and changing the appearance of text, using text elements ensures the prose can be made available to anyone who cannot decipher the alterations.

If the title of a component is included as text in an SVG, the tref element can be used to reference the prose instead of creating a new text node.

Linking

SVG graphical components can be made linkable by wrapping them in a elements. Linked elements should always include a title element identifying the nature of the referenced resource.

That certain graphical components are linkable, and others not, also needs to be established for users that may have to zoom the image or otherwise may not be able to ascertain which components are linked (e.g., through underlining or a border).

ARIA

The aria-* attributes can be attached to SVG elements. Properly setting and maintaining roles, properties and states increases the ability of all users to interact with dynamic content (e.g., SVG images used as custom controls).

Similarly, ensure that text equivalents for graphical components are updated to reflect the current state of the component.

When scripting SVG images, ensure that device-independent events have been used. Not all users will interact with your images in the same way.

Use ARIA landmark roles to simplify the navigation of complex images.