And They Will Never Sleep Again Svg

Scalable Vector Graphic (SVG) is emerging every bit the preferred graphic format to use on the web today. Are you lot abandoning the icon font or replacing old pg, gif and png graphics for the well-supported SVG, also? Allow's see how this will bear upon users of assistive technology (AT) and what is needed in social club to ensure a dandy user feel for everyone.

Graphics and Alternative Text

Before getting started with accessible SVGs, a few quick things to consider regarding graphics, accessibility and alternative text.

1. Does the graphic in question demand alternative text?

If a graphic is purely decorative, it does not demand to have alternative text.

All <img> tags demand the alt attribute to be valid, but the aspect tin be left empty (no infinite) <img src="pathtofile.svg" alt=""> and all the same validate. 😮

2. What is the context of the graphic and the text surrounding it?

If there text/content surrounding the graphic that provides the alternative text, it does not need additional additional alt text. For instance:

See the Pen SVG equally img src for figure with figcaption past Heather Migliorisi (@hmig) on CodePen.

What is the most appropriate alternative text for the graphic when it needs an alt attribute (see example 4 for more than data)? Depending on the content of the image, it can handled differently:

Run across the Pen SVG equally img src for effigy with figcaption past Heather Migliorisi (@hmig) on CodePen.

3. Does the graphic have a function? If then, information technology should exist conveyed to the user

For example, instead of labeling icons exactly as they are represented:

Bad Code Instance:

          <a href="http://codepen.io/username">   <img src="codepen_icon.png"        alt="CodePen Logo"> </a>

Provide some context for the user:

Good code example:

          <a href="http://codepen.io/username">   <img src="codepen_icon.png"    alt="See Picked Pens"> </a>

For more than information, please read WebAIM's, "Alternative Text" article for a comprehensive understanding of accessible graphics and the WAI Web Accessibility Tutorials on Images.

The post-obit examples were developed to work with:

Browsers that support SVG: IE 10+, FF, Chrome and Safari
Most common screen readers used: Jaws, NVDA, VoiceOver (VO) and Narrator

Bones Prototype Replacement

For the most basic implementation of an SVG, we accept following options:

1. SVG every bit img src

Run across the Pen SVG as img src by Heather Migliorisi (@hmig) on CodePen.

Let's check our browser usage stats to come across if nosotros need to do anything further. If the site's users are on latest version (Safari Desktop Version ix.ane.ane or iOS Version 9.iii.2) or newer nosotros can stop here.

Nevertheless, if the bulk of the users are still on older versions of Safari or iOS, nosotros need to add role="img" to the <img src="linktofile.svg" alt="Pixels, my super beautiful true cat" role="img">.

👏 Shout out to the folks that fixed the Safari/WebKit issues!

This case is fine to use as simply a bones prototype replacement, but it doesn't allow for the states to access to contents of the SVG for either AT or CSS/JS. So, if we want more control over the SVG, we'll need to inline the SVG directly in the HTML.

ii. Inline SVG

Inlining the SVG provides more predictable results and command than if it is added with <use> or <img> because the SVG source is straight bachelor in the DOM which is exposed to the accessibility API that is used by AT.

Let's accept the aforementioned basic SVG from the <img> case and say we want to add movement to the eyes. We tin can do that via JS if nosotros inline the SVG directly into the HTML.

See the Pen Basic SVG – Cat past Heather Migliorisi (@hmig) on CodePen.

Since this SVG does not incorporate whatsoever visible text that describes the graphic, nosotros need to add the alternative text (invisible) by:

Inside the <svg>, add:
- <title>A short title of the SVG</title>
  - must exist the offset kid of information technology's parent chemical element
  - will be used as a tooltip every bit the pointing device moves over it
A description can be added if needed
- a description – annotation this is not read by narrator (bug filed)

According to the W3C specification, we shouldn't take to do anything extra for SVGs across providing the <title> and possibly a <desc> because they should be available to the Accessibility API. Unfortunately, browser support is non quite there yet (bugs reported for: Chrome and Firefox).

So, to ensure the AT can access the <title> and <desc>:

Add the appropriate ID's to the <title> and <desc>:
- <championship id="uniqueTitleID">The title of the SVG</title>
- <desc id="uniqueDescID">A longer, more complete clarification for complex graphics.</desc>
On the <svg> tag, add:
- aria-labelledby="uniqueTitleID uniqueDescID" (use the title and desc ID's) – both title and description are included in aria-labelledby because information technology has ameliorate screen-reader support than aria-describedby (encounter tip #4)

1 more than thing:

On the <svg> tag, add:
- role="img" (and then that the SVG is non traversed past browsers that map the SVG to the grouping role)

Want to add a simple animation, such as eyes blinking?

          setInterval(part blinkeyes() {   var tl = new TimelineLite();   tl.to(".heart", .iv, {scaleY:.01, repeat:3, repeatDelay:.4, yoyo:true, transformOrigin: "50% seventy%", ease:Power2.easeInOut});   render tl;   }, 5000);  var master = new TimelineLite();  master.add(blinkeyes());

Update the title/clarification so that it accurately explains the image.

          <desc id="catDesc">An illustrated gray cat with bright green blinking eyes.</desc>

Meet the Pen Simple Inline Attainable SVG Cat – using title and desc past Heather Migliorisi (@hmig) on CodePen.

iii. Embed SVG via object or iframe

For now, I'd steer articulate of trying to employ <object> and <iframe>. In terms of utilize with a screen reader, they are not adequate.

Hither'south how it went for me:

Choose your method of embedding the SVG and add together tabindex="0":

          <object type="prototype/svg+xml"      data="/path-to-the-svg/filename.svg"      width="l%"      tabindex="0">   <img src="Fallback_image.jpg" alt="alt content here"> </object>

          <iframe src="/path-to-the-svg/filename.svg"      width="65%"      height="500"      sandbox      tabindex="0">   <img src="Fallback_image.jpg" alt="alt content hither">              </iframe>

Starting with the final SVG from the inline example, we demand to replace office="img" with role="group" on the svg.

          <svg id="true cat" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800" aria-labeledby="pixels-title pixels-desc" role="group">

Here'due south where information technology starts to go down hill…

Add a <text> chemical element in the SVG that contains the content of <championship> and possibly <desc> (for NVDA):

          <text id="nvda-championship">A cute, gray cat with green eyes. True cat illustration by Heather Migliorisi.</text>

Then, add a class to hibernate the text visually, simply keeping the content bachelor for screen readers. We can do this by setting the font-size: 0.

          .sr-only { font-size: 0; }

So, you finish upwards with both the <title> (and possibly <desc>) and <text> containing the same content in order to support both JAWS and NVDA.

NOTES:

Neither <object> nor <iframe> worked in Chrome. Chrome sees the fallback content, and then y'all could throw alt text in there, which would be a third (or fourth) identify to store the same content.
JAWS does not read the <text> content (across what is in aria-labelledby/describedby)

I recommended (based on browser/screen reader support) to use <img src="svg.svg> if possible. Although it's not always possible, as object/iframe support interactivity/blitheness where img ofttimes does not, and fallbacks are tricker.

Icons

There are several manufactures on the topic of replacing the icon font with an SVG. I was curious if using SVG for the icons would allow for easier accessibility implementation. Meaning: if the browsers would support the <title> when you implement the SVG with <apply> in the primary source SVG. Sadly, nope. Simply, it'southward easy enough to do and then with the icon itself and we'll show yous how below.

Once the SVG file is created that contains the icons (I like to utilise icomoon for this) and it is included in the certificate (http://codepen.io/hmig/full/OXWMLr/), nosotros demand to determine the patterns (icon + link, icon + text, just the icon, ect) that are needed for the site. From those patterns, we can devise the advisable method of applying alternative text.

To start, the code for icons ordinarily looks like this from an icon generator:

          <svg>    <title>phone</title>   <use xlink:href="#icon-telephone"></utilize> </svg>

Example 1: Standalone Icon, Meaningful

Meaningful icons need alternative text. This method is very like to the "Bones Image Replacement, Inline SVG Example."

Update the championship text to be reflective of what the icon is there for … allow'southward say it's showing a service supports mobile devices
To the <svg>, add role="img" (because the SVG is not mapped consistently, then it is not always acknowledged past AT. For example, the post-obit does non piece of work: Mac – VoiceOver + Chrome or Safari, Windows – NVDA + FF)

          <svg role="img">    <title>Supports Mobile Devices</title>   <use xlink:href="#icon-phone"></use> </svg>

Again, let's bank check our browser usage stats to encounter if we need to do anything further. If the site'south users are on latest version (Chrome 49.1) or newer we tin stop here.

However, if the majority of the users are yet on older versions of Chrome, nosotros need to add an id="xxxx" to the <title> and an aria-labelledby="xxxx" on the <svg>.

👏 Shout out to the folks that fixed the the Chrome bug!

Run across the Pen Example one: Standalone SVG Icon, Meaningful by Heather Migliorisi (@hmig) on CodePen.

Example two: Standalone Icon, Decorative

Decorative icons (icons that repeats the information conveyed past text or practise not add together significant value) practise not need alternative text and they should exist subconscious from the screen reader. For this instance, hide the SVG with aria-hidden="true".

          <p>   <svg aria-hidden="true">      <title>checkmark</title>     <apply xlink:href="#icon-checkmark"></use>   </svg>    Success! Your society went through. </p>

Encounter the Pen yJYVpa by Heather Migliorisi (@hmig) on CodePen.

Example three: Linked Icon, no text

For linked icons that are not paired with text, we can use aria-characterization on the <a> element to provide descriptive, alternative text. Add together aria-label="See Picked Pens" the <a> element.

          <a href="link" aria-characterization="Run across Picked Pens">   <svg>      <use xlink:href="#icon-codepen"></use>   </svg> </a>

Run across the Pen Example 3: Linked Icon, no text by Heather Migliorisi (@hmig) on CodePen.

Example 4: Linked Icon, with static text

Again, for linked icons that are paired with text, let's use aria-label on the <a> element to provide descriptive, alternative text.

With aria-label on the anchor tag, the screen reader does not announce the text within of the link. Add together aria-characterization="Run into Picked Pens" the <a> chemical element.

          <a href="link" aria-label="Run across Picked Pens">   <svg>      <employ xlink:href="#icon-codepen"></use>   </svg>   CodePen </a>

Come across the Pen Linked Icon, with static text by Heather Migliorisi (@hmig) on CodePen.

Example five: Linked Icon, with dynamic text

Let's say in that location's a dynamic value in the linked text + the icon. Here, we should not use aria-characterization on the link because then the value of the dynamic text is lost. For this instance, nosotros can apply spans and the off-screen text method. The numeric value in the bridge with id="itemsInCart" is the dynamically added element.

Add an additional span with the residuum of the alternative text (east.g. "items in your shopping cart")
Add the class="offscreen-text" to visually hide this text
Add aria-hidden="true" to the svg

          <a href="http://instance.com" id="cart">   <bridge id="itemsInCart">0</bridge>   <span class="offscreen-text">items in your shopping cart</span>   <svg aria-hidden="truthful">     <employ xlink:href="#icon-cart"></use>   </svg> </a>

See the Pen Instance five: Linked Icon, with dynamic text by Heather Migliorisi (@hmig) on CodePen.

Complete list of the icon examples:

Run across the Pen Accessible SVG Icons by Heather Migliorisi (@hmig) on CodePen.

Complex images – An Attainable Graph

It's neat that we can use SVGs instead of PNGs and JPGs, especially when it comes to complex web content like a graph. It would be excessive to provide all of this info in the alt attribute, so providing alternative text for this image (as a png/jpg) would be tricky. Instead, we can use an SVG and make all of that text direct attainable!

1. Setting up the file

Order of layers – In Adobe Illustrator, the layers volition export in the SVG from the bottom up. This is important because nosotros want to set up upwardly the layers in the social club we want them to be logically traversed by the keyboard for reading. The "Jaws" group should be listed first in the code, then the Jaws layer is at the very bottom in Illustrator.

Layer Naming – Information technology's a good idea to name the layers because they will be added every bit id'due south to the exported SVG. Don't worry if layers are named the same, the id'southward will be incremented in that case.

Layer Grouping – Information technology's important to note how the items are grouped here. Text characterization + the key detail (for color) and the bar in the graph are all independent in a group for each graph variant (Jaws, NVDA, ect). The reason for setting it upward this manner is for someone using a screen reader for reading comprehension. In some browsers, the user can click the bar and the corresponding text is read out and/or highlighted.

Saving/exporting – Every bit a safeguard, I like to keep ii versions of my SVG, i for editing in Illustrator and the other for lawmaking editing. So, I do a "save as" for the illustrator version and "file > consign > svg" for the cleaner, spider web version.

Optimization – The final matter before hand-editing the SVG, is to optimize it. Jake Archibald's tool, SVGOMG, is an splendid tool for this. Add together the SVG, then, switch to "Code" view to come across exactly what the feature toggles are doing. Set "prettify" on considering we withal have to edit the code, then nosotros desire information technology to be readable.

It is best to agree off on hand-editing the SVG (adding accessibility features) until it's 100% certain the SVG is complete design-wise. Once we start downwardly the road of paw-editing, it tin can be hard to grab if an editor (Inkscape/Illustrator/etc) has inadvertently changed something that was explicitly added.

Source control – If using a git-based variation of source command (git, SourceTree, ect), commit the SVG. Managing the file through ane of these volition help grab any funky/unwanted changes if information technology is opened and saved from Illustrator (or other visual editors) afterward information technology was edited by mitt considering any lawmaking (aria-*) Illustrator doesn't sympathize, information technology removes/deletes.

2. Permit's brand information technology accessible

Screen reader traversable – Make sure the SVG is traversable in all browsers past adding role="group" to the <svg>. According to the new SVG spec, they should map to the graphics-certificate office. Nonetheless, the spec is still in working draft style, therefore, the browsers have not implemented that yet.

Title and desc – Since we have text elements in the SVG that acts like the title and description, let'due south link them upward to the <svg> element with aria-labelledby="graph-title" and aria-describedby="graph-desc".

Content cleanup – Clean up whatsoever weird elements that Illustrator may accept created. For example, several <tspan>s were added to the following <text> element. A screen reader may read out the individual messages ("J" "a" "westward" "s" "- 44%") instead of the give-and-take ("Jaws – 44%"). So, remove the unnecessary <tspan>s wrapped effectually the individual messages.

Example bad:

          <text form="cls-2" transform="translate(345.49 36.45)">   J   <tspan x="6.23" y="0">a</tspan>   <tspan x="14.22" y="0">westward</tspan>   <tspan x="26.51" y="0">southward - 44%</tspan> </text>

Instance fixed:

          <text class="cls-2" transform="interpret(345.49 36.45)">   Jaws - 44% </text>

Add a link to the survey – Content-wise, since this graph is based-upon a survey, allow'due south link to information technology. For now (it is not a requirement in SVG ii), in SVGs, add together xlink: to the href.

          <a xlink:href="http://webaim.org/projects/screenreadersurvey6/#used">

For more information on xlink, cheque out "We'll Always Have Paris: Using SVG Namespacing and XLink" by Dudley Storey.

Add semantic roles – Add together some semantic roles to the groups containing the bars, characterization and key. Let's brand the grouping that contains all of these a list because most screen readers volition announce the total number of items in the listing and what position in the listing the electric current item is:

          <g id="bars" role="list">

and the individual groups inside tin be listitems:

          <thou id="Jaws" function="listitem">

Add a label to the list – Provide AT users a little more than info about the graph they are interacting with. Add a label to the group containing the list with aria-characterization="bar graph".

          <g id="confined" role="listing" aria-label="bar graph" transform="interpret(0,58)">

Test and gear up – Let's test it with the screen reader. As expected, the screen reader reads through the championship, desc and key list items. But, information technology also goes through the percentage values on the y-axis, each rect and line.

A quick note on hiding elements (rect, circle, text) from AT in an SVG – The only way to "hibernate" elements from a screen reader in an SVG is by adding role="presentation" to it. What this does is negates the element's native semantics from mapping to the accessibility API. If you have multiple items you desire to hide, unfortunately, you cannot wrap everything in a <k> and add the role="presentation" to it. The simply thing that does is hibernate that element from the AT, the children of information technology are still traversable. And then, we accept to add together role="presentation" on each individual element we want hidden. On the vivid side, the new SVG Accessibility Spec aims to ease a lot of this burden. Elements, such every bit shapes without alt text, will exist treated as if they had a part of none or presentation.

Hibernate the shapes/lines – Hide the shape elements from the screen reader by adding role="presentation" to each chemical element.

Hibernate Text Elements – Hide the confusing text elements (every bit shown above highlighted in yellow – the 0-l% on the y-centrality, the x/y axis lines and the bars in the chart) from the screen reader past adding role="presentation" and aria-hidden="true".

Come across the Pen Accessible Complex Epitome – Bar Graph past Heather Migliorisi (@hmig) on CodePen.

Screen reader demo videos:

JAWS
NVDA
VoiceOver
Narrator

Interactive images

Even better than attainable charts and graphs are accessible interactive images. Let's look at a elementary timeline infographic. What this breaks downwardly to is: the top "title" text section and the timeline section. From there, the timeline breaks down to time segments that contain a title, image and clarification.

The inspiration for this example was found on codrops, merely I wanted to run across if I could make an accessible variation. The adorable cat icons are from iconka.

Allow's add some life to this and breathing the fourth dimension segments. Instead of showing all of the info at once, let's just testify the time and activity championship circle. When a user interacts with the fourth dimension surface area or activity circumvolve, the rest of the content will be revealed.

i. Setting upwardly the file

Offset, follow the "Setting up the file" section previously covered in this article. Starting from the web optimized version, let'due south skip by the css blitheness part is ready and dig right into making it attainable.

2. Making it accessible

Way properties were removed in the following examples to simplify the code, but are in the actual demo.

Screen reader traversable – Brand certain the SVG is traversable in all browsers, so add role="group" to the <svg>.

          <svg id="InteractiveSVG" function="grouping">

Title and desc – For this example, we can utilize the text at the top of the SVG <g id="timeline-championship"> equally the title and link it by adding aria-labelledby to the <svg>.

          <svg id="InteractiveSVG" aria-labelledby="timeline-championship" aria-describedby="timeline-desc" role="group">

Then, add an id to the <desc> and link information technology up with aria-describedby on the <svg>.

          <desc id="timeline-desc">An Interactive Timeline</desc>

          <svg id="InteractiveSVG" aria-labelledby="timeline-championship" aria-describedby="timeline-desc" role="group">

Add together semantic roles – Add together some semantic roles to the groups containing the timeline and time segments. Let's make the group that contains all of these a listing: <g id="timeline" role="listing">.

Add a label to the listing: <k id="timeline" part="list" aria-label="the timeline, from morning to night">

and the private grouped time segments inside tin be listitems: <g id="play" role="listitem">

Interactive/keyboard accessible – Immediately later each <g> that has the role="listitem" add an <a xlink:href></a> so that information technology contains the entire group. Currently, this is the only manner to add interactivity to an SVG.

Add tabindex="0" to ensure that it is focusable in all browsers.

          <a xlink:href="#play-group" tabindex="0" id="play-group"></a>

Gear up the semantics of the link – Notice that the link is to itself. This really isn't a semantic link because information technology does not link to annihilation and could confuse screen reader users. Then, let's add together a role="img" to signify that it'south an paradigm element instead of a link.

          <a xlink:href="#play-group" office="img" id="play-group"></a>

Make the text inside of the time segment accessible – Adding the img role stops the AT from traversing the rest of the elements, and so we demand to add aria-labelledby with the ids of the text elements in the order they should exist read.

          <a xlink:href="#play-grouping" role="img" aria-labelledby="play-time play-text" tabindex="0" id="play-group"></a>

Add together hidden descriptive text for the images – Use the <tspan> with an offscreen grade, so that visually it is hidden, just it remains in the DOM.

          <tspan course="offscreen" id="play-description">A gray kitten tangled in a ball of yarn.</tspan>

Add the ID to the aria-labelledby on the xlink so that it is read.

          <a xlink:href="#play-group" part="img" aria-labelledby="play-fourth dimension play-text play-description" tabindex="0" id="play-group"></a>

Fix visual CSS for focus – Setting a visual representation for focus is needed for folks using the keyboard to navigate. I liked how it looked, so I added it to the hover state as well.

          a:focus [class*="time-circumvolve"], a:hover [class*="time-circle"] {   stroke: black;   stroke-width: 5;   paint-order: stroke; }

Add JavaScript for window focus – With SVGs, when yous navigate through the link items, the window does non ever shift to ensure the element is in the viewport. The reason is some browsers (problems filed and hopefully fixed soon) are scrolling the <svg> element as a whole without regard to the children elements that may be offscreen. And then, permit's add some JavaScript to ringlet the window to ensure the focused elements are visible.

There's probably a more efficient mode to do this, simply this is just a quick example:

          $("#play-group").focus(function() {   window.scrollTo(250,350); }); ... $("#cuddle-group" ).focus(function(){   window.scrollTo(250 , 1350); });

See the Pen Accessible Interactive SVG by Heather Migliorisi (@hmig) on CodePen.

Screen reader demo videos:

JAWS
NVDA
VoiceOver
Narrator

SVGs and High Contrast Mode

Another wrench in the mix: Windows and High Dissimilarity Mode for people with low vision use this feature to aid with the readability of content. Information technology'southward a wrench because, when used, the text and document body may change color when the feature is activated, simply elements in an SVG are non updated when a user selects different dissimilarity modes.

image from http://disney.wikia.com/wiki/File:Alice-facepalm.jpg

The expert news: In that location are media queries to handle this.

Examples for how to fix the icon section in the article:

          @media screen and (-ms-high-contrast: active) {   .icon svg {     /* select a color that volition contrast         well on black or white because other         color modes can be chosen and yous         need a color that will work with either      */     fill: light-green;   } }  /* black text on white background *. @media screen and (-ms-high-contrast: blackness-on-white) {    .icon svg {      /* select a dark color that will          contrast on black          (#fff is also much contrast)       */     make full: #333;   } }  /* blackness text on white background */ @media screen and (-ms-high-contrast: white-on-blackness) {  .icon svg {     /* select a light colour that will         contrast on white         (#000 is too much contrast)     */     fill: #efefef;   } }

Decision

Make up one's mind if alternative text is needed
1. If no, hide the epitome/SVG aria-hidden="true"
2. If yes:
  1. Add/link up title and/or clarification to the SVG element
  2. Use roles to add semantic value (e.g. part="listing", role="listitem")
  3. Hide graphical and group elements that should non be read w/ role="presentation"
  4. Hide text elements that should not exist read with role="presentation" and aria-hidden="true"
Determine if the SVG is interactive
1. If no – do naught else
2. If yeah:
  1. Set focus with xlink + tabindex="0"
  2. If the link is not an actual link, add a role to ensure information technology is semantic
  3. Add JS for setting window focus
  4. Prepare visual CSS for focus: outline
Test with various screen readers + browsers. Exam different contrast modes. Test keyboard navigation.

Special Thanks

A huge "thank yous" to Amelia Bellamy-Royds and Leonie Watson for double checking some of the examples and pointing out bug! I couldn't accept put this article together without their assist.

Bugs filed while working on this commodity \o/

Microsoft:

https://connect.microsoft.com/IE/Feedback/Details/2483564
https://connect.microsoft.com/IE/Feedback/Details/2480772

Mozilla:

https://bugzilla.mozilla.org/show_bug.cgi?id=1257399
https://bugzilla.mozilla.org/show_bug.cgi?id=1257600

Bugs fixed while working on this commodity 👏

Safari/WebKit bug that required the adding of function="img" to the <img> tag
Chrome bug that fabricated you add aria-labelledby or aria-label to the svg in order to have the title read.

Resources

Making the Switch Away from Icon Fonts to SVG: Converting Font Icons to SVG by Sara Soueidan
WAI Paradigm Tutorial
WebAIM: Alternative Text, Context is Everything
W3C – Requirements for providing text to act as an alternative for images
Accessibility APIs: A Primal To Web Accessibility by Léonie Watson & Chaals McCathie Nevile
W3C – The 'desc' and 'title' elements
Tips for Creating Attainable SVG by Léonie Watson
SVGOMG by Jake Archibald
W3C – graphics-md (office)
Nosotros'll E'er Take Paris: Using SVG Namespacing and XLink by Dudley Storey
Basic screen reader commands for accessibility testing past The Paciello Group
W3C – Including Elements in the Accessibility Tree
-ms-loftier-contrast media characteristic

loveassight.blogspot.com

Source: https://css-tricks.com/accessible-svgs/