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:

<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:

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

It should be noted that inline SVG <text> elements are, in most cases, completely accessible, as they contain real text, no matter how visually laden with effects they might be; they won’t need <title> in most cases. However, if you break text into outlines (i.e. pure vector shapes) you will need to provide a <title>.

Like an HTML page, text in an SVG element is read by accessibility devices in document order, not visual position order.

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:

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

Because SVG elements used in <img> tags may be navigated to as stand-alone elements in browsers, or indexed by search engines as separate documents, they should also contain appropriate <title> and <desc> information in the markup of the original SVG document.

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>.

This example assumes that you’d also provide graph axes and numerical information for users without accessibility needs: when possible, expose information as <text> to benefit everyone.

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.