1: Treat linked SVG images as you would bitmaps
<img src="coca-cola-logo.svg" alt="Coca-Cola">
… just like a regular bitmap.
2: If you’re using inline SVG, provide a title
<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,
<use>, as well as SVG container elements like
<title> will usually 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:
You can improve this by associating
aria-labelledby. In the case of a single element, this might map to the root
<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
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
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
<title> are rendered visually in the browser by default (although they can be styled to do so);
<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
<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.