A wooden pathway through a moss-clad Norwegian forest

Cet article est également disponible en français

Inline can do wonders for responsive design while reducing page load times and generating crisp, clean icons, but it comes with some concerns: in particular, accessibility. There’s a strong argument to be made that accessibility was not a priority when the original SVG 1.0 specification was released 15 years ago; however, SVG 1.1 improved upon that some, and the upcoming SVG 2.0 should bring accessibility needs front-and-center.

In the there here and now, making SVG accessible takes a little work, but it’s a straightforward process if you remember five rules:

1: Treat linked SVG images like bitmaps, with one addition

When linking to an SVG document as an image, the alt attribute is still required, just like a regular bitmap. An ARIA image role should also be added:

<img src="coca-cola-logo.svg" alt="Coca-Cola" role="image">

Without the added role, iOS VoiceOver (Apple’s text-to-speech service for devices) will ignore the alt attribute for the SVG.

2: If you’re using inline SVG, provide a title

The <title> of an SVG element serves a similar purpose to the <title> of an HTML document: it’s a brief text description of the document, or advisory information. Think it as <alt> for inline SVG:

<svg aria-labelledby="title">
    <g>
        <title id="title" lang="en">Red Rectangle</title>
        <rect x="0" y="0" width="100" height="50" fill="red" />
    </g>    
</svg>

<title> can also be used for individual elements: specifically, <circle>, <ellipse>, <image>, <line>, <path>, <polygon>, <polyline>, <rect>, <text> and <use>, as well as SVG container elements like <a>, <defs>, <g> and <symbol>. <title> should be the first child of this element. Sometimes this title will be visually descriptive:

<title>Yellow Five-Pointed Star</title>
<polygon fill="#ff0" points="509,19.6 534.7,71.7 592.1,80 550.5,120.5 560.4,177.7 509,150.7 457.6,177.7 467.5,120.5 425.9,80 483.3,71.7 "/>

… and sometimes it will be informational (i.e. describing the purpose or meaning of an element).

If an SVG contains only one element, a single <title> after the opening <svg> tag may well suffice; if the document contains multiple elements, you’ll likely need a <title> for each element or group:

<svg>
    <g>
        <title>Red Rectangle</title>
        <rect x="0" y="0" width="100" height="50" fill="red" />
    </g>    
</svg>

You can improve this by associating <title> with aria-labelledby. In the case of a single element, this might map to the root <svg> element:

<svg aria-labelledby="title">
    <g>
        <title id="title" lang="en">Red Rectangle</title>
        <rect x="0" y="0" width="100" height="50" fill="red" />
    </g>    
</svg>

Like <desc> and other HTML elements, <title> should also have a lang attribute to indicate the language used (see below).

3: Provide a description where appropriate

<desc> is a longer description of the SVG element, containing its purpose or design. It might be broadly thought of as the SVG equivalent of <figcaption>.

<svg>
	<g>
		<title>International sales by country</title>
		<title lang="fr">Les ventes internationales par pays</title>
		<desc>Bar chart showing company sales by country, in millions of dollars (US).</desc>
		<desc lang="fr">Diagramme à barres montrant les ventes de l'entreprise par pays, en millions de dollars (US).</desc>
		<g>
			<text x="20" y="70">US Sales</text>
			<title id="USamount">30 million</title>
			<rect x="0" y="0" width="100" height="50" fill="red" aria-labelledby="USamount" />
		</g>
</svg>

Rendered inline, the SVG document will look something like this: International sales by country Les ventes internationales par pays Bar chart showing company sales by country, in millions of dollars (US). Diagramme à barres montrant les ventes de l'entreprise par pays, en millions de dollars (US). US Sales 30 million French Sales 50 million

4: If the SVG is purely decorative, you don’t have to do anything

If the SVG element is being used decoratively - a gradient or background pattern, for example - there is no need to provide <title>, <desc> or alt. (If you want your page to validate, you should include alt for linked SVGs but set the value of the attribute to ”empty” for purely decorative elements: i.e. alt="" or simply alt).

Neither <desc> nor <title> are rendered visually in the browser by default; <title> text will appear as a tooltip on hover / selection in compatible browsers.

5: Don’t expect your WYSIWYG tool to do any of this for you

Unfortunately Adobe Illustrator currently has poor support for SVG accessibility: it exports layer names as id values, rather than <title> information. Inkscape does better, allowing you to add and edit <title> and <desc> for every element, at the cost of adding a lot of extraneous cruft to the markup. You’ll likely find a little hand-coding is needed to add full accessibility to an SVG document made in vector illustrator tools.

Photograph by Christine Sætre, used under a Creative Commons license

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.