SVG included in an
Including an SVG in an
imgtag is no different than including a regular image–always use an
alttag for SVGs that are important!
Additionally, since SVG is new type of image format, you must also include an ARIA
role='image'since some screen readers will skip over the alt tag for SVGs without that
role(specifically iOS VoiceOver).
<img src='/images/blue-triangle.svg' role='image' alt='Blue Triangle'/>
- If the SVG is decorative, use an empty
alt=''. If you do not, a screenreader will read the source tag which sounds awful.
<img src="/assets/images/frequent-flyer.svg" alt='' role='image'/>
In the output XML for the SVG, include a title tag directly below the svg tag.
<title>tag for an SVG should be brief, much like an
altattribute for an image.
In the SVG tag, include an
aria-labelledbyattribute that points to the
If there is more than one shape, it can be a good idea to include a title tag for each shape group.
<desc>tag (description), in addition to a title tag, is very helpful for users of assistive technology.
On his site, Dudley Storey writes that ’
<desc>is a longer description of the SVG element, containing its purpose or design.’
desctag: ‘Bar chart showing company sales by country, in millions of dollars (US).’
If your inline SVG is decorative, however, you do not need to include any of these attributes.
1 2 3 4 5 6
<svg aria-labelledby="title"> <title id="title" lang="en">Red Rectangle</title> <g> <rect x="0" y="0" width="100" height="50" fill="red" /> </g> </svg>
Icons can convey a large amount of information without having to express what you mean in words. To make sure icon fonts are accessible to all your users, though, think about the following:
- Icon is purely decorative: If your icon is purely decorative, include a
- Icon is important contextually: Include a
titleattribute, and a styled screen reader text span.
<i class="fa fa-bicycle" aria-hidden="true" title="Time to destination by bike"></i> <span class="screenreader-text">Time to destination by bike:</span>
1 2 3 4
<span class='screenreader-text'> <span class="icon-star" aria-hidden="true"></span> Favorite </span>