Inline SVG 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:
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.