SVG Accessibility

components.result-item.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'li',
  classNameBindings: ['status'],
  
  status: 'notok'
});

components.result-list.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'ul'
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
});

router.js

import EmberRouter from '@ember/routing/router';
import config from './config/environment';

const Router = EmberRouter.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('pattern-1');
  this.route('pattern-2');
  this.route('pattern-3');
  this.route('pattern-4');
  this.route('pattern-5');
  this.route('pattern-6');
  this.route('pattern-7');
  this.route('pattern-8');
  this.route('ideal-patterns');
});

export default Router;

routes.ideal-patterns.js

import Ember from 'ember';

export default Ember.Route.extend({
});

routes.pattern-1.js

import Ember from 'ember';

export default Ember.Route.extend({
});

routes.pattern-2.js

import Ember from 'ember';

export default Ember.Route.extend({
});

routes.pattern-3.js

import Ember from 'ember';

export default Ember.Route.extend({
});

routes.pattern-4.js

import Ember from 'ember';

export default Ember.Route.extend({
});

routes.pattern-5.js

import Ember from 'ember';

export default Ember.Route.extend({
});

routes.pattern-6.js

import Ember from 'ember';

export default Ember.Route.extend({
});

routes.pattern-7.js

import Ember from 'ember';

export default Ember.Route.extend({
});

routes.pattern-8.js

import Ember from 'ember';

export default Ember.Route.extend({
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

nav {
  margin-bottom: 2rem;
}
nav a {
  margin: 0.5rem 0;
  display: block;
  color: #0077c8;
}
nav a strong {
  color: #ec631a;
}

.subroute {
  border-top: 1px solid #e4e2e2;
}

h1 span {
  display: block;
}

pre {
  padding: 1rem 1rem 0;
  color: white;
  background: black;
}
pre span {
  color: #ec631a;
}
pre span span {
  color: #0077c8;
}

.svgContainer {
	display: flex;
  justify-content: space-between;
}
.svgContainer svg {
  width: 10rem;
  height: 10rem;
  border: 1px solid #e4e2e2;
}
.svgResults p {
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e4e2e2;
}
.svgResults ul {
  padding: 0;
}
.svgResults li {
  margin-bottom: 0.5rem;
 	display: flex;
  font-size: 0.9rem;
  color: orangered;
}
.svgResults .ideal {
  color: green;
}
.svgResults .ok {
  color: yellowgreen;
}
.svgResults .notok {
  color: orangered;
}
.svgResults strong {
 	margin-right: 0.5rem;
}
.svgResults em {
  color: #aaa;
}

templates.application.hbs

<h1>SVG Accessibility</h1>

<nav aria-hidden="true">
	{{#link-to 'index'}}
  	Home
  {{/link-to}}
  
	{{#link-to 'pattern-1'}}
    Pattern 1: 
    <strong>&lt;svg&gt;</strong> 
    + 
    <strong>role="img"</strong> 
    + 
    <strong>&lt;title&gt;</strong>
  {{/link-to}}

  {{#link-to 'pattern-2'}}
    Pattern 2: 
    <strong>&lt;svg&gt;</strong> 
    + 
    <strong>role="img"</strong> 
    + 
    <strong>&lt;text&gt;</strong>
  {{/link-to}}

  {{#link-to 'pattern-3'}}
    Pattern 3: 
    <strong>&lt;svg&gt;</strong> 
    + 
    <strong>role="img"</strong> 
    + 
    <strong>&lt;title&gt;</strong> 
    + 
    <strong>&lt;text&gt;</strong>
  {{/link-to}}

  {{#link-to 'pattern-4'}}
    Pattern 4: 
    <strong>&lt;svg&gt;</strong> 
    + 
    <strong>role="img"</strong> 
    + 
    <strong>&lt;title&gt;</strong>
    + 
    <strong>aria-labelledby="[ID]"</strong>
  {{/link-to}}

  {{#link-to 'pattern-5'}}
    Pattern 5: 
    <strong>&lt;svg&gt;</strong> 
    + 
    <strong>role="img"</strong> 
    + 
    <strong>&lt;title&gt;</strong> 
    + 
    <strong>aria-describedby="[ID]"</strong>
  {{/link-to}}

  {{#link-to 'pattern-6'}}
    Pattern 6: 
    <strong>&lt;svg&gt;</strong> 
    + 
    <strong>role="img"</strong> 
    + 
    <strong>&lt;title&gt;</strong> 
    + 
    <strong>&lt;desc&gt;</strong>
  {{/link-to}}

  {{#link-to 'pattern-7'}}
    Pattern 7: 
    <strong>&lt;svg&gt;</strong> 
    + 
    <strong>role="img"</strong> 
    + 
    <strong>&lt;title&gt;</strong> 
    + 
    <strong>&lt;desc&gt;</strong>
    + 
    <strong>aria-labelledby="[ID]"</strong>
  {{/link-to}}

  {{#link-to 'pattern-8'}}
    Pattern 8: 
    <strong>&lt;svg&gt;</strong> 
    + 
    <strong>role="img"</strong> 
    + 
    <strong>&lt;title&gt;</strong> 
    + 
    <strong>&lt;desc&gt;</strong>
    + 
    <strong>aria-describedby="[ID]"</strong>
  {{/link-to}}
  
  {{#link-to 'ideal-patterns'}}
  	Ideal Patterns
  {{/link-to}}
</nav>

<div class="subroute" aria-live="true">
  {{outlet}}
</div>

templates.components.result-item.hbs

<strong>{{title}}</strong> "{{result}}"

templates.components.result-list.hbs

<p>Legend: 
	<span class="notok">Not Ok</span>, 
  <span class="ok">Ok</span>, 
  <span class="ideal">Ideal</span>
</p>

{{yield
	(hash
		item=(component 'result-item')
  )
}}

templates.ideal-patterns.hbs

<h1>Ideal Patterns</h1>

<h2>When only a single title is needed</h2>
<p>
	Pattern 4: 
  <span><b aria-hidden="true">&lt;</b>svg<b aria-hidden="true">&gt;</b> 
  + 
  <b aria-label="role equals image">role="img"</b> 
  + 
  <b aria-hidden="true">&lt;</b>title<b aria-hidden="true">&gt;</b>
  + 
  <b aria-label="aria labelled by ID">aria-labelledby="[ID]"</b></span>
</p>

<code aria-hidden="true">
	<pre>
<span>&lt;svg <span>role="image"</span> <span>aria-labbeledby="title"</span>&gt;</span>
  <span>&lt;title <span>id="title"</span>&gt;</span>Lightbulb Moment!<span>&lt;/title&gt;</span>
<span>&lt;/svg&gt;</span>
	</pre>
</code>


<h2>When a title and a description are needed</h2>
<p>
	Pattern 7: 
  <span><b aria-hidden="true">&lt;</b>svg<b aria-hidden="true">&gt;</b> 
  + 
  <b aria-label="role equals image">role="img"</b> 
  + 
  <b aria-hidden="true">&lt;</b>title<b aria-hidden="true">&gt;</b> 
  + 
  <b aria-hidden="true">&lt;</b><b aria-label="description">desc</b><b aria-hidden="true">&gt;</b>
  + 
  <b aria-label="aria labelled by ID">aria-labelledby="[ID]"</b></span>
</p>

<code aria-hidden="true">
	<pre>
<span>&lt;svg <span>role="image"</span> <span>aria-labbeledby="title description"</span>&gt;</span>
  <span>&lt;title <span>id="title"</span>&gt;</span>Lightbulb Moment!<span>&lt;/title&gt;</span>
  <span>&lt;desc <span>id="description"</span>&gt;</span>I have a great idea.<span>&lt;/desc&gt;</span>
<span>&lt;/svg&gt;</span>
	</pre>
</code>

templates.pattern-1.hbs

<h1>
  Pattern 1: 
  <span><b aria-hidden="true">&lt;</b>svg<b aria-hidden="true">&gt;</b> 
  + 
  <b aria-label="role equals image">role="img"</b> 
  + 
  <b aria-hidden="true">&lt;</b>title<b aria-hidden="true">&gt;</b></span>
</h1>

<code aria-hidden="true">
	<pre>
<span>&lt;svg <span>role="image"</span>&gt;</span>
  <span>&lt;title&gt;</span>Lightbulb Moment!<span>&lt;/title&gt;</span>
<span>&lt;/svg&gt;</span>
	</pre>
</code>

<div class="svgContainer">
	<div class="svgResults" aria-hidden="true">
    {{#result-list as |list|}}
      {{list.item
      	title="Mac Chrome Vox:"
        result="(image)"
      }}
      {{list.item
        status="ideal"
        title="Mac Safari + VoiceOver:"
        result="Lightbulb Moment! (image)"
      }}
      {{list.item
        status="ok"
        title="Windows Firefox + NVDA:"
        result="Lightbulb Moment! (graphic) Lightbulb Moment!"
      }}
      {{list.item
        status="ideal"
        title="Windows Chrome + NVDA:"
        result="(graphic) Lightbulb Moment!"
      }}
      {{list.item
        status="ideal"
        title="Windows Edge + Narrator:"
        result="(image) Lightbulb Moment!"
      }}
      {{list.item
        status="ideal"
        title="Windows IE11 + JAWS:"
        result="(graphic) Lightbulb Moment!"
      }}
      {{list.item
        status="ideal"
        title="Mobile iOS Safari + VoiceOver:"
        result="Lightbulb Moment! (image)"
      }}
      {{list.item
        status="ideal"
        title="Mobile Android Chrome + TalkBack:"
        result="Lightbulb Moment! (graphic)"
      }}
      {{list.item
        status="ok"
        title="Mobile Android Firefox + TalkBack:"
        result="Lightbulb Moment! (graphic) (graphic)"
      }}
    {{/result-list}}
  </div>
  
	<svg role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
      <title>Lightbulb moment!</title>
<path d="M19,39v-1h-0.5c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5H19v-2h10v2h0.5c0.3,0,0.5,0.2,0.5,0.5S29.8,38,29.5,38H29v1h0.5
    c0.3,0,0.5,0.2,0.5,0.5S29.8,40,29.5,40H29c0,0-1.4,3-5,3s-5-3-5-3h-0.5c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5H19z M20,39h8v-1h-8
    V39z M20.2,40c0.2,0.3,0.4,0.5,0.7,0.8c0.8,0.8,1.9,1.2,3.2,1.2s2.3-0.5,3.2-1.2c0.3-0.2,0.5-0.5,0.7-0.8H20.2L20.2,40z M20,37h8v-1
    h-8V37z M16.1,7.8c-0.1-0.2,0-0.5,0.2-0.7c0.2-0.1,0.5,0,0.7,0.2l1.6,3.2c0.1,0.2,0,0.5-0.2,0.7c-0.2,0.1-0.5,0-0.7-0.2
    C17.7,11,16.1,7.8,16.1,7.8z M30.2,7.4c0.1-0.2,0.4-0.4,0.7-0.2c0.2,0.1,0.4,0.4,0.2,0.7L29.5,11c-0.1,0.2-0.4,0.4-0.7,0.2
    c-0.2-0.1-0.4-0.4-0.2-0.7C28.6,10.6,30.2,7.4,30.2,7.4z M23.1,6c0-0.3,0.2-0.5,0.5-0.5s0.5,0.2,0.5,0.5v3.2c0,0.3-0.2,0.5-0.5,0.5
    s-0.5-0.2-0.5-0.5V6z M10.8,11.9c-0.2-0.2-0.2-0.5,0-0.7c0.2-0.2,0.5-0.2,0.7,0l2.3,2.4c0.2,0.2,0.2,0.5,0,0.7
    c-0.2,0.2-0.5,0.2-0.7,0C13.1,14.3,10.8,11.9,10.8,11.9z M7.9,17.7c-0.3-0.1-0.4-0.3-0.4-0.6c0.1-0.3,0.3-0.4,0.6-0.4c0,0,0,0,0,0
    l3.1,0.8c0.3,0.1,0.4,0.3,0.4,0.6c-0.1,0.3-0.3,0.4-0.6,0.4c0,0,0,0,0,0C11,18.5,7.9,17.7,7.9,17.7z M39.7,17.7l-3.1,0.8
    c-0.3,0.1-0.5-0.1-0.6-0.4c-0.1-0.3,0.1-0.5,0.3-0.6l3.1-0.8c0.3-0.1,0.5,0.1,0.6,0.4C40.1,17.4,40,17.6,39.7,17.7z M35.7,11.3
    c0.2-0.2,0.5-0.2,0.7,0c0.2,0.2,0.2,0.5,0,0.7c0,0,0,0,0,0l-2.3,2.4c-0.2,0.2-0.5,0.2-0.7,0c-0.2-0.2-0.2-0.5,0-0.7c0,0,0,0,0,0
    L35.7,11.3z M18.8,34c0-5.5-4.8-5.5-4.8-12.6c0-5,4.5-9.4,10-9.4s10,4.4,10,9.4c0,7.1-4.8,7.1-4.8,12.6H18.8z M28.2,33
    c0.2-1.8,0.8-3,2.1-4.7l0.4-0.6c1.6-2.1,2.2-3.5,2.2-6.3c0-4.5-4.1-8.4-9-8.4s-9,3.9-9,8.4c0,2.7,0.6,4.2,2.2,6.3l0.4,0.6
    c1.3,1.7,1.9,3,2.1,4.7C19.8,33,28.2,33,28.2,33z M21.4,15.9c0.3-0.1,0.5,0.1,0.6,0.3c0.1,0.2,0,0.5-0.3,0.6c-1.8,0.7-3.2,2.2-3.9,4
    c-0.1,0.3-0.4,0.4-0.6,0.3c-0.2-0.1-0.4-0.4-0.3-0.6C17.6,18.4,19.3,16.7,21.4,15.9z"/>
</svg>
</div>

templates.pattern-2.hbs

<h1>
  Pattern 2: 
  <span><b aria-hidden="true">&lt;</b>svg<b aria-hidden="true">&gt;</b> 
  + 
  <b aria-label="role equals image">role="img"</b> 
  + 
  <b aria-hidden="true">&lt;</b>text<b aria-hidden="true">&gt;</b></span>
</h1>

<code aria-hidden="true">
	<pre>
<span>&lt;svg <span>role="image"</span>&gt;</span>
  <span>&lt;text&gt;</span>Lightbulb Moment!<span>&lt;/text&gt;</span>
<span>&lt;/svg&gt;</span>
	</pre>
</code>

<div class="svgContainer">
  <div class="svgResults" aria-hidden="true">
  	{{#result-list as |list|}}
      {{list.item
        title="Mac Chrome Vox:"
        result="(image)"
      }}
      {{list.item
        title="Mac Safari + VoiceOver:"
        result="Lightbulb Moment!"
      }}
      {{list.item
        title="Windows Firefox + NVDA:"
        result="<em>Not focusable</em>"
      }}
      {{list.item
        title="Windows Chrome + NVDA:"
        result="<em>Not focusable</em>"
      }}
      {{list.item
        status="ideal"
        title="Windows Edge + Narrator:"
        result="(image) Lightbulb Moment!"
      }}
      {{list.item
        status="ideal"
        title="Windows IE11 + JAWS:"
        result="(graphic) Lightbulb Moment!"
      }}
      {{list.item
        title="Mobile iOS Safari + VoiceOver:"
        result="(image)"
      }}
      {{list.item
        title="Mobile Android Chrome + TalkBack:"
        result="<em>Not focusable</em>"
      }}
      {{list.item
        status="ok"
        title="Mobile Android Firefox + TalkBack:"
        result="(graphic) Lightbulb Moment! (graphic)"
      }}
    {{/result-list}}
  </div>
  
  <svg role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
      <text>Lightbulb moment!</text>
<path d="M19,39v-1h-0.5c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5H19v-2h10v2h0.5c0.3,0,0.5,0.2,0.5,0.5S29.8,38,29.5,38H29v1h0.5
    c0.3,0,0.5,0.2,0.5,0.5S29.8,40,29.5,40H29c0,0-1.4,3-5,3s-5-3-5-3h-0.5c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5H19z M20,39h8v-1h-8
    V39z M20.2,40c0.2,0.3,0.4,0.5,0.7,0.8c0.8,0.8,1.9,1.2,3.2,1.2s2.3-0.5,3.2-1.2c0.3-0.2,0.5-0.5,0.7-0.8H20.2L20.2,40z M20,37h8v-1
    h-8V37z M16.1,7.8c-0.1-0.2,0-0.5,0.2-0.7c0.2-0.1,0.5,0,0.7,0.2l1.6,3.2c0.1,0.2,0,0.5-0.2,0.7c-0.2,0.1-0.5,0-0.7-0.2
    C17.7,11,16.1,7.8,16.1,7.8z M30.2,7.4c0.1-0.2,0.4-0.4,0.7-0.2c0.2,0.1,0.4,0.4,0.2,0.7L29.5,11c-0.1,0.2-0.4,0.4-0.7,0.2
    c-0.2-0.1-0.4-0.4-0.2-0.7C28.6,10.6,30.2,7.4,30.2,7.4z M23.1,6c0-0.3,0.2-0.5,0.5-0.5s0.5,0.2,0.5,0.5v3.2c0,0.3-0.2,0.5-0.5,0.5
    s-0.5-0.2-0.5-0.5V6z M10.8,11.9c-0.2-0.2-0.2-0.5,0-0.7c0.2-0.2,0.5-0.2,0.7,0l2.3,2.4c0.2,0.2,0.2,0.5,0,0.7
    c-0.2,0.2-0.5,0.2-0.7,0C13.1,14.3,10.8,11.9,10.8,11.9z M7.9,17.7c-0.3-0.1-0.4-0.3-0.4-0.6c0.1-0.3,0.3-0.4,0.6-0.4c0,0,0,0,0,0
    l3.1,0.8c0.3,0.1,0.4,0.3,0.4,0.6c-0.1,0.3-0.3,0.4-0.6,0.4c0,0,0,0,0,0C11,18.5,7.9,17.7,7.9,17.7z M39.7,17.7l-3.1,0.8
    c-0.3,0.1-0.5-0.1-0.6-0.4c-0.1-0.3,0.1-0.5,0.3-0.6l3.1-0.8c0.3-0.1,0.5,0.1,0.6,0.4C40.1,17.4,40,17.6,39.7,17.7z M35.7,11.3
    c0.2-0.2,0.5-0.2,0.7,0c0.2,0.2,0.2,0.5,0,0.7c0,0,0,0,0,0l-2.3,2.4c-0.2,0.2-0.5,0.2-0.7,0c-0.2-0.2-0.2-0.5,0-0.7c0,0,0,0,0,0
    L35.7,11.3z M18.8,34c0-5.5-4.8-5.5-4.8-12.6c0-5,4.5-9.4,10-9.4s10,4.4,10,9.4c0,7.1-4.8,7.1-4.8,12.6H18.8z M28.2,33
    c0.2-1.8,0.8-3,2.1-4.7l0.4-0.6c1.6-2.1,2.2-3.5,2.2-6.3c0-4.5-4.1-8.4-9-8.4s-9,3.9-9,8.4c0,2.7,0.6,4.2,2.2,6.3l0.4,0.6
    c1.3,1.7,1.9,3,2.1,4.7C19.8,33,28.2,33,28.2,33z M21.4,15.9c0.3-0.1,0.5,0.1,0.6,0.3c0.1,0.2,0,0.5-0.3,0.6c-1.8,0.7-3.2,2.2-3.9,4
    c-0.1,0.3-0.4,0.4-0.6,0.3c-0.2-0.1-0.4-0.4-0.3-0.6C17.6,18.4,19.3,16.7,21.4,15.9z"/>
</svg>
</div>

templates.pattern-3.hbs

<h1>
  Pattern 3: 
  <span><b aria-hidden="true">&lt;</b>svg<b aria-hidden="true">&gt;</b> 
  + 
  <b aria-label="role equals image">role="img"</b> 
  + 
  <b aria-hidden="true">&lt;</b>title<b aria-hidden="true">&gt;</b> 
  + 
  <b aria-hidden="true">&lt;</b>text<b aria-hidden="true">&gt;</b></span>
</h1>

<code aria-hidden="true">
	<pre>
<span>&lt;svg <span>role="image"</span>&gt;</span>
  <span>&lt;title&gt;</span>Lightbulb Moment!<span>&lt;/title&gt;</span>
  <span>&lt;text <span>class="visually-hidden"</span>&gt;</span>I have a great idea.<span>&lt;/text&gt;</span>
<span>&lt;/svg&gt;</span>
	</pre>
</code>

<div class="svgContainer">
  <div class="svgResults" aria-hidden="true">
  	{{#result-list as |list|}}
      {{list.item
        title="Mac Chrome Vox:"
        result="(image)"
      }}
      {{list.item
        title="Mac Safari + VoiceOver:"
        result="I have a great idea."
      }}
      {{list.item
        title="Windows Firefox + NVDA:"
        result="Lightbulb Moment! (graphic) Lightbulb Moment!"
      }}
      {{list.item
        title="Windows Chrome + NVDA:"
        result="(graphic) Lightbulb Moment!"
      }}
      {{list.item
        status="ideal"
        title="Windows Edge + Narrator:"
        result="(image) Lightbulb Moment! I have a great idea."
      }}
      {{list.item
        status="ok"
        title="Windows IE11 + JAWS:"
        result="(graphic) Lightbulb Moment! (graphic) I have a great idea."
      }}
      {{list.item
        title="Mobile iOS Safari + VoiceOver:"
        result="Lightbulb Moment! (image)"
      }}
      {{list.item
        title="Mobile Android Chrome + TalkBack:"
        result="Lightbulb Moment! (graphic)"
      }}
      {{list.item
        status="ok"
        title="Mobile Android Firefox + TalkBack:"
        result="Lightbulb Moment! (graphic) I have a great idea. (graphic)"
      }}
    {{/result-list}}
  </div>
  
  <svg role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
      <title>Lightbulb moment!</title>
      <text class="visually-hidden" font-size="0">I have a great idea.</text>
<path d="M19,39v-1h-0.5c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5H19v-2h10v2h0.5c0.3,0,0.5,0.2,0.5,0.5S29.8,38,29.5,38H29v1h0.5
    c0.3,0,0.5,0.2,0.5,0.5S29.8,40,29.5,40H29c0,0-1.4,3-5,3s-5-3-5-3h-0.5c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5H19z M20,39h8v-1h-8
    V39z M20.2,40c0.2,0.3,0.4,0.5,0.7,0.8c0.8,0.8,1.9,1.2,3.2,1.2s2.3-0.5,3.2-1.2c0.3-0.2,0.5-0.5,0.7-0.8H20.2L20.2,40z M20,37h8v-1
    h-8V37z M16.1,7.8c-0.1-0.2,0-0.5,0.2-0.7c0.2-0.1,0.5,0,0.7,0.2l1.6,3.2c0.1,0.2,0,0.5-0.2,0.7c-0.2,0.1-0.5,0-0.7-0.2
    C17.7,11,16.1,7.8,16.1,7.8z M30.2,7.4c0.1-0.2,0.4-0.4,0.7-0.2c0.2,0.1,0.4,0.4,0.2,0.7L29.5,11c-0.1,0.2-0.4,0.4-0.7,0.2
    c-0.2-0.1-0.4-0.4-0.2-0.7C28.6,10.6,30.2,7.4,30.2,7.4z M23.1,6c0-0.3,0.2-0.5,0.5-0.5s0.5,0.2,0.5,0.5v3.2c0,0.3-0.2,0.5-0.5,0.5
    s-0.5-0.2-0.5-0.5V6z M10.8,11.9c-0.2-0.2-0.2-0.5,0-0.7c0.2-0.2,0.5-0.2,0.7,0l2.3,2.4c0.2,0.2,0.2,0.5,0,0.7
    c-0.2,0.2-0.5,0.2-0.7,0C13.1,14.3,10.8,11.9,10.8,11.9z M7.9,17.7c-0.3-0.1-0.4-0.3-0.4-0.6c0.1-0.3,0.3-0.4,0.6-0.4c0,0,0,0,0,0
    l3.1,0.8c0.3,0.1,0.4,0.3,0.4,0.6c-0.1,0.3-0.3,0.4-0.6,0.4c0,0,0,0,0,0C11,18.5,7.9,17.7,7.9,17.7z M39.7,17.7l-3.1,0.8
    c-0.3,0.1-0.5-0.1-0.6-0.4c-0.1-0.3,0.1-0.5,0.3-0.6l3.1-0.8c0.3-0.1,0.5,0.1,0.6,0.4C40.1,17.4,40,17.6,39.7,17.7z M35.7,11.3
    c0.2-0.2,0.5-0.2,0.7,0c0.2,0.2,0.2,0.5,0,0.7c0,0,0,0,0,0l-2.3,2.4c-0.2,0.2-0.5,0.2-0.7,0c-0.2-0.2-0.2-0.5,0-0.7c0,0,0,0,0,0
    L35.7,11.3z M18.8,34c0-5.5-4.8-5.5-4.8-12.6c0-5,4.5-9.4,10-9.4s10,4.4,10,9.4c0,7.1-4.8,7.1-4.8,12.6H18.8z M28.2,33
    c0.2-1.8,0.8-3,2.1-4.7l0.4-0.6c1.6-2.1,2.2-3.5,2.2-6.3c0-4.5-4.1-8.4-9-8.4s-9,3.9-9,8.4c0,2.7,0.6,4.2,2.2,6.3l0.4,0.6
    c1.3,1.7,1.9,3,2.1,4.7C19.8,33,28.2,33,28.2,33z M21.4,15.9c0.3-0.1,0.5,0.1,0.6,0.3c0.1,0.2,0,0.5-0.3,0.6c-1.8,0.7-3.2,2.2-3.9,4
    c-0.1,0.3-0.4,0.4-0.6,0.3c-0.2-0.1-0.4-0.4-0.3-0.6C17.6,18.4,19.3,16.7,21.4,15.9z"/>
</svg>
</div>

templates.pattern-4.hbs

<h1>
  Pattern 4: 
  <span><b aria-hidden="true">&lt;</b>svg<b aria-hidden="true">&gt;</b> 
  + 
  <b aria-label="role equals image">role="img"</b> 
  + 
  <b aria-hidden="true">&lt;</b>title<b aria-hidden="true">&gt;</b>
  + 
  <b aria-label="aria labelled by ID">aria-labelledby="[ID]"</b></span>
</h1>

<code aria-hidden="true">
	<pre>
<span>&lt;svg <span>role="image"</span> <span>aria-labbeledby="title"</span>&gt;</span>
  <span>&lt;title <span>id="title"</span>&gt;</span>Lightbulb Moment!<span>&lt;/title&gt;</span>
<span>&lt;/svg&gt;</span>
	</pre>
</code>

<div class="svgContainer">
  <div class="svgResults" aria-hidden="true">
  	{{#result-list as |list|}}
      {{list.item
        status="ideal"
        title="Mac Chrome Vox:"
        result="Lightbulb Moment! (image)"
      }}
      {{list.item
        status="ideal"
        title="Mac Safari + VoiceOver:"
        result="Lightbulb Moment! (image)"
      }}
      {{list.item
        status="ok"
        title="Windows Firefox + NVDA:"
        result="Lightbulb Moment! (graphic) Lightbulb Moment!"
      }}
      {{list.item
        status="ideal"
        title="Windows Chrome + NVDA:"
        result="(graphic) Lightbulb Moment!"
      }}
      {{list.item
        status="ideal"
        title="Windows Edge + Narrator:"
        result="(image) Lightbulb Moment!"
      }}
      {{list.item
        status="ideal"
        title="Windows IE11 + JAWS:"
        result="(graphic) Lightbulb Moment!"
      }}
      {{list.item
        status="ideal"
        title="Mobile iOS Safari + VoiceOver:"
        result="Lightbulb Moment! (image)"
      }}
      {{list.item
        status="ideal"
        title="Mobile Android Chrome + TalkBack:"
        result="Lightbulb Moment! (graphic)"
      }}
      {{list.item
        status="ok"
        title="Mobile Android Firefox + TalkBack:"
        result="Lightbulb Moment! (graphic) (graphic)"
      }}
    {{/result-list}}
  </div>
  
  <svg role="img" aria-labelledby="lightbulb8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
      <title id="lightbulb8">Lightbulb moment!</title>
<path d="M19,39v-1h-0.5c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5H19v-2h10v2h0.5c0.3,0,0.5,0.2,0.5,0.5S29.8,38,29.5,38H29v1h0.5
    c0.3,0,0.5,0.2,0.5,0.5S29.8,40,29.5,40H29c0,0-1.4,3-5,3s-5-3-5-3h-0.5c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5H19z M20,39h8v-1h-8
    V39z M20.2,40c0.2,0.3,0.4,0.5,0.7,0.8c0.8,0.8,1.9,1.2,3.2,1.2s2.3-0.5,3.2-1.2c0.3-0.2,0.5-0.5,0.7-0.8H20.2L20.2,40z M20,37h8v-1
    h-8V37z M16.1,7.8c-0.1-0.2,0-0.5,0.2-0.7c0.2-0.1,0.5,0,0.7,0.2l1.6,3.2c0.1,0.2,0,0.5-0.2,0.7c-0.2,0.1-0.5,0-0.7-0.2
    C17.7,11,16.1,7.8,16.1,7.8z M30.2,7.4c0.1-0.2,0.4-0.4,0.7-0.2c0.2,0.1,0.4,0.4,0.2,0.7L29.5,11c-0.1,0.2-0.4,0.4-0.7,0.2
    c-0.2-0.1-0.4-0.4-0.2-0.7C28.6,10.6,30.2,7.4,30.2,7.4z M23.1,6c0-0.3,0.2-0.5,0.5-0.5s0.5,0.2,0.5,0.5v3.2c0,0.3-0.2,0.5-0.5,0.5
    s-0.5-0.2-0.5-0.5V6z M10.8,11.9c-0.2-0.2-0.2-0.5,0-0.7c0.2-0.2,0.5-0.2,0.7,0l2.3,2.4c0.2,0.2,0.2,0.5,0,0.7
    c-0.2,0.2-0.5,0.2-0.7,0C13.1,14.3,10.8,11.9,10.8,11.9z M7.9,17.7c-0.3-0.1-0.4-0.3-0.4-0.6c0.1-0.3,0.3-0.4,0.6-0.4c0,0,0,0,0,0
    l3.1,0.8c0.3,0.1,0.4,0.3,0.4,0.6c-0.1,0.3-0.3,0.4-0.6,0.4c0,0,0,0,0,0C11,18.5,7.9,17.7,7.9,17.7z M39.7,17.7l-3.1,0.8
    c-0.3,0.1-0.5-0.1-0.6-0.4c-0.1-0.3,0.1-0.5,0.3-0.6l3.1-0.8c0.3-0.1,0.5,0.1,0.6,0.4C40.1,17.4,40,17.6,39.7,17.7z M35.7,11.3
    c0.2-0.2,0.5-0.2,0.7,0c0.2,0.2,0.2,0.5,0,0.7c0,0,0,0,0,0l-2.3,2.4c-0.2,0.2-0.5,0.2-0.7,0c-0.2-0.2-0.2-0.5,0-0.7c0,0,0,0,0,0
    L35.7,11.3z M18.8,34c0-5.5-4.8-5.5-4.8-12.6c0-5,4.5-9.4,10-9.4s10,4.4,10,9.4c0,7.1-4.8,7.1-4.8,12.6H18.8z M28.2,33
    c0.2-1.8,0.8-3,2.1-4.7l0.4-0.6c1.6-2.1,2.2-3.5,2.2-6.3c0-4.5-4.1-8.4-9-8.4s-9,3.9-9,8.4c0,2.7,0.6,4.2,2.2,6.3l0.4,0.6
    c1.3,1.7,1.9,3,2.1,4.7C19.8,33,28.2,33,28.2,33z M21.4,15.9c0.3-0.1,0.5,0.1,0.6,0.3c0.1,0.2,0,0.5-0.3,0.6c-1.8,0.7-3.2,2.2-3.9,4
    c-0.1,0.3-0.4,0.4-0.6,0.3c-0.2-0.1-0.4-0.4-0.3-0.6C17.6,18.4,19.3,16.7,21.4,15.9z"/>
</svg>
</div>

templates.pattern-5.hbs

<h1>
  Pattern 5: 
  <span><b aria-hidden="true">&lt;</b>svg<b aria-hidden="true">&gt;</b> 
  + 
  <b aria-label="role equals image">role="img"</b> 
  + 
  <b aria-hidden="true">&lt;</b>title<b aria-hidden="true">&gt;</b> 
  + 
  <b aria-label="aria described by ID">aria-describedby="[ID]"</b></span>
</h1>

<code aria-hidden="true">
	<pre>
<span>&lt;svg <span>role="image"</span> <span>aria-describedby="title"</span>&gt;</span>
  <span>&lt;title <span>id="title"</span>&gt;</span>Lightbulb Moment!<span>&lt;/title&gt;</span>
<span>&lt;/svg&gt;</span>
	</pre>
</code>

<div class="svgContainer">
  <div class="svgResults" aria-hidden="true">
  	{{#result-list as |list|}}
      {{list.item
        title="Mac Chrome Vox:"
        result="(image)"
      }}
      {{list.item
        status="ideal"
        title="Mac Safari + VoiceOver:"
        result="Lightbulb Moment! (image)"
      }}
      {{list.item
        status="ok"
        title="Windows Firefox + NVDA:"
        result="Lightbulb Moment! (graphic) Lightbulb Moment!"
      }}
      {{list.item
        status="ideal"
        title="Windows Chrome + NVDA:"
        result="(graphic) Lightbulb Moment!"
      }}
      {{list.item
        status="ideal"
        title="Windows Edge + Narrator:"
        result="(image) Lightbulb Moment!"
      }}
      {{list.item
        status="ideal"
        title="Windows IE11 + JAWS:"
        result="(graphic) Lightbulb Moment!"
      }}
      {{list.item
        status="ideal"
        title="Mobile iOS Safari + VoiceOver:"
        result="Lightbulb Moment! (image)"
      }}
      {{list.item
        status="ok"
        title="Mobile Android Chrome + TalkBack:"
        result="Lightbulb Moment! (graphic) Lightbulb Moment!"
      }}
      {{list.item
        status="ok"
        title="Mobile Android Firefox + TalkBack:"
        result="Lightbulb Moment! (graphic) (graphic)"
      }}
    {{/result-list}}
  </div>
  
  <svg role="img" aria-describedby="lightbulb9" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
      <title id="lightbulb9">Lightbulb moment!</title>
<path d="M19,39v-1h-0.5c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5H19v-2h10v2h0.5c0.3,0,0.5,0.2,0.5,0.5S29.8,38,29.5,38H29v1h0.5
    c0.3,0,0.5,0.2,0.5,0.5S29.8,40,29.5,40H29c0,0-1.4,3-5,3s-5-3-5-3h-0.5c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5H19z M20,39h8v-1h-8
    V39z M20.2,40c0.2,0.3,0.4,0.5,0.7,0.8c0.8,0.8,1.9,1.2,3.2,1.2s2.3-0.5,3.2-1.2c0.3-0.2,0.5-0.5,0.7-0.8H20.2L20.2,40z M20,37h8v-1
    h-8V37z M16.1,7.8c-0.1-0.2,0-0.5,0.2-0.7c0.2-0.1,0.5,0,0.7,0.2l1.6,3.2c0.1,0.2,0,0.5-0.2,0.7c-0.2,0.1-0.5,0-0.7-0.2
    C17.7,11,16.1,7.8,16.1,7.8z M30.2,7.4c0.1-0.2,0.4-0.4,0.7-0.2c0.2,0.1,0.4,0.4,0.2,0.7L29.5,11c-0.1,0.2-0.4,0.4-0.7,0.2
    c-0.2-0.1-0.4-0.4-0.2-0.7C28.6,10.6,30.2,7.4,30.2,7.4z M23.1,6c0-0.3,0.2-0.5,0.5-0.5s0.5,0.2,0.5,0.5v3.2c0,0.3-0.2,0.5-0.5,0.5
    s-0.5-0.2-0.5-0.5V6z M10.8,11.9c-0.2-0.2-0.2-0.5,0-0.7c0.2-0.2,0.5-0.2,0.7,0l2.3,2.4c0.2,0.2,0.2,0.5,0,0.7
    c-0.2,0.2-0.5,0.2-0.7,0C13.1,14.3,10.8,11.9,10.8,11.9z M7.9,17.7c-0.3-0.1-0.4-0.3-0.4-0.6c0.1-0.3,0.3-0.4,0.6-0.4c0,0,0,0,0,0
    l3.1,0.8c0.3,0.1,0.4,0.3,0.4,0.6c-0.1,0.3-0.3,0.4-0.6,0.4c0,0,0,0,0,0C11,18.5,7.9,17.7,7.9,17.7z M39.7,17.7l-3.1,0.8
    c-0.3,0.1-0.5-0.1-0.6-0.4c-0.1-0.3,0.1-0.5,0.3-0.6l3.1-0.8c0.3-0.1,0.5,0.1,0.6,0.4C40.1,17.4,40,17.6,39.7,17.7z M35.7,11.3
    c0.2-0.2,0.5-0.2,0.7,0c0.2,0.2,0.2,0.5,0,0.7c0,0,0,0,0,0l-2.3,2.4c-0.2,0.2-0.5,0.2-0.7,0c-0.2-0.2-0.2-0.5,0-0.7c0,0,0,0,0,0
    L35.7,11.3z M18.8,34c0-5.5-4.8-5.5-4.8-12.6c0-5,4.5-9.4,10-9.4s10,4.4,10,9.4c0,7.1-4.8,7.1-4.8,12.6H18.8z M28.2,33
    c0.2-1.8,0.8-3,2.1-4.7l0.4-0.6c1.6-2.1,2.2-3.5,2.2-6.3c0-4.5-4.1-8.4-9-8.4s-9,3.9-9,8.4c0,2.7,0.6,4.2,2.2,6.3l0.4,0.6
    c1.3,1.7,1.9,3,2.1,4.7C19.8,33,28.2,33,28.2,33z M21.4,15.9c0.3-0.1,0.5,0.1,0.6,0.3c0.1,0.2,0,0.5-0.3,0.6c-1.8,0.7-3.2,2.2-3.9,4
    c-0.1,0.3-0.4,0.4-0.6,0.3c-0.2-0.1-0.4-0.4-0.3-0.6C17.6,18.4,19.3,16.7,21.4,15.9z"/>
</svg>
</div>

templates.pattern-6.hbs

<h1>
  Pattern 6: 
  <span><b aria-hidden="true">&lt;</b>svg<b aria-hidden="true">&gt;</b> 
  + 
  <b aria-label="role equals image">role="img"</b> 
  + 
  <b aria-hidden="true">&lt;</b>title<b aria-hidden="true">&gt;</b> 
  + 
  <b aria-hidden="true">&lt;</b><b aria-label="description">desc</b><b aria-hidden="true">&gt;</b></span>
</h1>

<code aria-hidden="true">
	<pre>
<span>&lt;svg <span>role="image"</span>&gt;</span>
  <span>&lt;title&gt;</span>Lightbulb Moment!<span>&lt;/title&gt;</span>
  <span>&lt;desc&gt;</span>I have a great idea.<span>&lt;/desc&gt;</span>
<span>&lt;/svg&gt;</span>
	</pre>
</code>

<div class="svgContainer">
  <div class="svgResults" aria-hidden="true">
  	{{#result-list as |list|}}
      {{list.item
        title="Mac Chrome Vox:"
        result="(image)"
      }}
      {{list.item
        status="ideal"
        title="Mac Safari + VoiceOver:"
        result="Lightbulb Moment! (image) I have a great idea."
      }}
      {{list.item
        title="Windows Firefox + NVDA:"
        result="Lightbulb Moment! (graphic) Lightbulb Moment!"
      }}
      {{list.item
        title="Windows Chrome + NVDA:"
        result="(graphic) Lightbulb Moment!"
      }}
      {{list.item
        title="Windows Edge + Narrator:"
        result="(image) Lightbulb Moment!"
      }}
      {{list.item
        status="ok"
        title="Windows IE11 + JAWS:"
        result="(graphic) Lightbulb Moment! (graphic) I have a great idea."
      }}
      {{list.item
        status="ideal"
        title="Mobile iOS Safari + VoiceOver:"
        result="Lightbulb Moment! (image) I have a great idea."
      }}
      {{list.item
        title="Mobile Android Chrome + TalkBack:"
        result="Lightbulb Moment! (graphic)"
      }}
      {{list.item
        
        title="Mobile Android Firefox + TalkBack:"
        result="Lightbulb Moment! (graphic) (graphic)"
      }}
    {{/result-list}}
  </div>
  
  <svg role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
      <title>Lightbulb moment!</title>
      <desc>I have a great idea.</desc>
<path d="M19,39v-1h-0.5c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5H19v-2h10v2h0.5c0.3,0,0.5,0.2,0.5,0.5S29.8,38,29.5,38H29v1h0.5
    c0.3,0,0.5,0.2,0.5,0.5S29.8,40,29.5,40H29c0,0-1.4,3-5,3s-5-3-5-3h-0.5c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5H19z M20,39h8v-1h-8
    V39z M20.2,40c0.2,0.3,0.4,0.5,0.7,0.8c0.8,0.8,1.9,1.2,3.2,1.2s2.3-0.5,3.2-1.2c0.3-0.2,0.5-0.5,0.7-0.8H20.2L20.2,40z M20,37h8v-1
    h-8V37z M16.1,7.8c-0.1-0.2,0-0.5,0.2-0.7c0.2-0.1,0.5,0,0.7,0.2l1.6,3.2c0.1,0.2,0,0.5-0.2,0.7c-0.2,0.1-0.5,0-0.7-0.2
    C17.7,11,16.1,7.8,16.1,7.8z M30.2,7.4c0.1-0.2,0.4-0.4,0.7-0.2c0.2,0.1,0.4,0.4,0.2,0.7L29.5,11c-0.1,0.2-0.4,0.4-0.7,0.2
    c-0.2-0.1-0.4-0.4-0.2-0.7C28.6,10.6,30.2,7.4,30.2,7.4z M23.1,6c0-0.3,0.2-0.5,0.5-0.5s0.5,0.2,0.5,0.5v3.2c0,0.3-0.2,0.5-0.5,0.5
    s-0.5-0.2-0.5-0.5V6z M10.8,11.9c-0.2-0.2-0.2-0.5,0-0.7c0.2-0.2,0.5-0.2,0.7,0l2.3,2.4c0.2,0.2,0.2,0.5,0,0.7
    c-0.2,0.2-0.5,0.2-0.7,0C13.1,14.3,10.8,11.9,10.8,11.9z M7.9,17.7c-0.3-0.1-0.4-0.3-0.4-0.6c0.1-0.3,0.3-0.4,0.6-0.4c0,0,0,0,0,0
    l3.1,0.8c0.3,0.1,0.4,0.3,0.4,0.6c-0.1,0.3-0.3,0.4-0.6,0.4c0,0,0,0,0,0C11,18.5,7.9,17.7,7.9,17.7z M39.7,17.7l-3.1,0.8
    c-0.3,0.1-0.5-0.1-0.6-0.4c-0.1-0.3,0.1-0.5,0.3-0.6l3.1-0.8c0.3-0.1,0.5,0.1,0.6,0.4C40.1,17.4,40,17.6,39.7,17.7z M35.7,11.3
    c0.2-0.2,0.5-0.2,0.7,0c0.2,0.2,0.2,0.5,0,0.7c0,0,0,0,0,0l-2.3,2.4c-0.2,0.2-0.5,0.2-0.7,0c-0.2-0.2-0.2-0.5,0-0.7c0,0,0,0,0,0
    L35.7,11.3z M18.8,34c0-5.5-4.8-5.5-4.8-12.6c0-5,4.5-9.4,10-9.4s10,4.4,10,9.4c0,7.1-4.8,7.1-4.8,12.6H18.8z M28.2,33
    c0.2-1.8,0.8-3,2.1-4.7l0.4-0.6c1.6-2.1,2.2-3.5,2.2-6.3c0-4.5-4.1-8.4-9-8.4s-9,3.9-9,8.4c0,2.7,0.6,4.2,2.2,6.3l0.4,0.6
    c1.3,1.7,1.9,3,2.1,4.7C19.8,33,28.2,33,28.2,33z M21.4,15.9c0.3-0.1,0.5,0.1,0.6,0.3c0.1,0.2,0,0.5-0.3,0.6c-1.8,0.7-3.2,2.2-3.9,4
    c-0.1,0.3-0.4,0.4-0.6,0.3c-0.2-0.1-0.4-0.4-0.3-0.6C17.6,18.4,19.3,16.7,21.4,15.9z"/>
</svg>
</div>

templates.pattern-7.hbs

<h1>
  Pattern 7: 
  <span><b aria-hidden="true">&lt;</b>svg<b aria-hidden="true">&gt;</b> 
  + 
  <b aria-label="role equals image">role="img"</b> 
  + 
  <b aria-hidden="true">&lt;</b>title<b aria-hidden="true">&gt;</b> 
  + 
  <b aria-hidden="true">&lt;</b><b aria-label="description">desc</b><b aria-hidden="true">&gt;</b>
  + 
  <b aria-label="aria labelled by ID">aria-labelledby="[ID]"</b></span>
</h1>

<code aria-hidden="true">
	<pre>
<span>&lt;svg <span>role="image"</span> <span>aria-labbeledby="title description"</span>&gt;</span>
  <span>&lt;title <span>id="title"</span>&gt;</span>Lightbulb Moment!<span>&lt;/title&gt;</span>
  <span>&lt;desc <span>id="description"</span>&gt;</span>I have a great idea.<span>&lt;/desc&gt;</span>
<span>&lt;/svg&gt;</span>
	</pre>
</code>

<div class="svgContainer">
  <div class="svgResults" aria-hidden="true">
  	{{#result-list as |list|}}
      {{list.item
        status="ideal"
        title="Mac Chrome Vox:"
        result="Lightbulb Moment! I have a great idea. (image)"
      }}
      {{list.item
        status="ok"
        title="Mac Safari + VoiceOver:"
        result="Lightbulb Moment! I have a great idea. (image) I have a great idea."
      }}
      {{list.item
        status="ok"
        title="Windows Firefox + NVDA:"
        result="Lightbulb Moment! I have a great idea. (graphic) Lightbulb Moment! I have a great idea."
      }}
      {{list.item
        status="ideal"
        title="Windows Chrome + NVDA:"
        result="(graphic) Lightbulb Moment! I have a great idea."
      }}
      {{list.item
        title="Windows Edge + Narrator:"
        result="(image) Lightbulb Moment!"
      }}
      {{list.item
        status="ok"
        title="Windows IE11 + JAWS:"
        result="(graphic) Lightbulb Moment! (graphic) I have a great idea."
      }}
      {{list.item
        status="ok"
        title="Mobile iOS Safari + VoiceOver:"
        result="Lightbulb Moment! I have a great idea. (image) I have a great idea."
      }}
      {{list.item
        status="ideal"
        title="Mobile Android Chrome + TalkBack:"
        result="Lightbulb Moment! I have a great idea. (graphic)"
      }}
      {{list.item
        status="ok"
        title="Mobile Android Firefox + TalkBack:"
        result="Lightbulb Moment! I have a great idea. (graphic) (graphic)"
      }}
    {{/result-list}}
  </div>
  
  <svg role="img" aria-labelledby="lightbulb11 description11" version="1.1" class="hotpink" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
      <title id="lightbulb11">Lightbulb moment!</title>
      <desc id="description11">I have a great idea.</desc>
<path d="M19,39v-1h-0.5c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5H19v-2h10v2h0.5c0.3,0,0.5,0.2,0.5,0.5S29.8,38,29.5,38H29v1h0.5
    c0.3,0,0.5,0.2,0.5,0.5S29.8,40,29.5,40H29c0,0-1.4,3-5,3s-5-3-5-3h-0.5c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5H19z M20,39h8v-1h-8
    V39z M20.2,40c0.2,0.3,0.4,0.5,0.7,0.8c0.8,0.8,1.9,1.2,3.2,1.2s2.3-0.5,3.2-1.2c0.3-0.2,0.5-0.5,0.7-0.8H20.2L20.2,40z M20,37h8v-1
    h-8V37z M16.1,7.8c-0.1-0.2,0-0.5,0.2-0.7c0.2-0.1,0.5,0,0.7,0.2l1.6,3.2c0.1,0.2,0,0.5-0.2,0.7c-0.2,0.1-0.5,0-0.7-0.2
    C17.7,11,16.1,7.8,16.1,7.8z M30.2,7.4c0.1-0.2,0.4-0.4,0.7-0.2c0.2,0.1,0.4,0.4,0.2,0.7L29.5,11c-0.1,0.2-0.4,0.4-0.7,0.2
    c-0.2-0.1-0.4-0.4-0.2-0.7C28.6,10.6,30.2,7.4,30.2,7.4z M23.1,6c0-0.3,0.2-0.5,0.5-0.5s0.5,0.2,0.5,0.5v3.2c0,0.3-0.2,0.5-0.5,0.5
    s-0.5-0.2-0.5-0.5V6z M10.8,11.9c-0.2-0.2-0.2-0.5,0-0.7c0.2-0.2,0.5-0.2,0.7,0l2.3,2.4c0.2,0.2,0.2,0.5,0,0.7
    c-0.2,0.2-0.5,0.2-0.7,0C13.1,14.3,10.8,11.9,10.8,11.9z M7.9,17.7c-0.3-0.1-0.4-0.3-0.4-0.6c0.1-0.3,0.3-0.4,0.6-0.4c0,0,0,0,0,0
    l3.1,0.8c0.3,0.1,0.4,0.3,0.4,0.6c-0.1,0.3-0.3,0.4-0.6,0.4c0,0,0,0,0,0C11,18.5,7.9,17.7,7.9,17.7z M39.7,17.7l-3.1,0.8
    c-0.3,0.1-0.5-0.1-0.6-0.4c-0.1-0.3,0.1-0.5,0.3-0.6l3.1-0.8c0.3-0.1,0.5,0.1,0.6,0.4C40.1,17.4,40,17.6,39.7,17.7z M35.7,11.3
    c0.2-0.2,0.5-0.2,0.7,0c0.2,0.2,0.2,0.5,0,0.7c0,0,0,0,0,0l-2.3,2.4c-0.2,0.2-0.5,0.2-0.7,0c-0.2-0.2-0.2-0.5,0-0.7c0,0,0,0,0,0
    L35.7,11.3z M18.8,34c0-5.5-4.8-5.5-4.8-12.6c0-5,4.5-9.4,10-9.4s10,4.4,10,9.4c0,7.1-4.8,7.1-4.8,12.6H18.8z M28.2,33
    c0.2-1.8,0.8-3,2.1-4.7l0.4-0.6c1.6-2.1,2.2-3.5,2.2-6.3c0-4.5-4.1-8.4-9-8.4s-9,3.9-9,8.4c0,2.7,0.6,4.2,2.2,6.3l0.4,0.6
    c1.3,1.7,1.9,3,2.1,4.7C19.8,33,28.2,33,28.2,33z M21.4,15.9c0.3-0.1,0.5,0.1,0.6,0.3c0.1,0.2,0,0.5-0.3,0.6c-1.8,0.7-3.2,2.2-3.9,4
    c-0.1,0.3-0.4,0.4-0.6,0.3c-0.2-0.1-0.4-0.4-0.3-0.6C17.6,18.4,19.3,16.7,21.4,15.9z"/>
</svg>
</div>

templates.pattern-8.hbs

<h1>
  Pattern 8: 
  <span><b aria-hidden="true">&lt;</b>svg<b aria-hidden="true">&gt;</b> 
  + 
  <b aria-label="role equals image">role="img"</b> 
  + 
  <b aria-hidden="true">&lt;</b>title<b aria-hidden="true">&gt;</b> 
  + 
  <b aria-hidden="true">&lt;</b><b aria-label="description">desc</b><b aria-hidden="true">&gt;</b>
  + 
  <b aria-label="aria described by ID">aria-describedby="[ID]"</b></span>
</h1>

<code aria-hidden="true">
	<pre>
<span>&lt;svg <span>role="image"</span> <span>aria-describedby="title description"</span>&gt;</span>
  <span>&lt;title <span>id="title"</span>&gt;</span>Lightbulb Moment!<span>&lt;/title&gt;</span>
  <span>&lt;desc <span>id="description"</span>&gt;</span>I have a great idea.<span>&lt;/desc&gt;</span>
<span>&lt;/svg&gt;</span>
	</pre>
</code>

<div class="svgContainer">
  <div class="svgResults" aria-hidden="true">
  	{{#result-list as |list|}}
      {{list.item
        status="ok"
        title="Mac Chrome Vox:"
        result="(image) (image) Lightbulb Moment! I have a great idea."
      }}
      {{list.item
        status="ok"
        title="Mac Safari + VoiceOver:"
        result="Lightbulb Moment! (image) Lightbulb Moment! I have a great idea."
      }}
      {{list.item
        title="Windows Firefox + NVDA:"
        result="Lightbulb Moment! (graphic) Lightbulb Moment!"
      }}
      {{list.item
        title="Windows Chrome + NVDA:"
        result="(graphic) Lightbulb Moment!"
      }}
      {{list.item
        title="Windows Edge + Narrator:"
        result="(image) Lightbulb Moment!"
      }}
      {{list.item
        status="ok"
        title="Windows IE11 + JAWS:"
        result="(graphic) Lightbulb Moment! (graphic) I have a great idea."
      }}
      {{list.item
        status="ok"
        title="Mobile iOS Safari + VoiceOver:"
        result="Lightbulb Moment! (image) Lightbulb Moment! I have a great idea."
      }}
      {{list.item
        status="ok"
        title="Mobile Android Chrome + TalkBack:"
        result="Lightbulb Moment! (graphic) Lightbulb Moment! I have a great idea."
      }}
      {{list.item
        title="Mobile Android Firefox + TalkBack:"
        result="Lightbulb Moment! (graphic) (graphic)"
      }}
    {{/result-list}}
  </div>
  
  <svg role="img" aria-describedby="lightbulb12 description12" version="1.1" class="ltgray" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
      <title id="lightbulb12">Lightbulb moment!</title>
      <desc id="description12">I have a great idea.</desc>
<path d="M19,39v-1h-0.5c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5H19v-2h10v2h0.5c0.3,0,0.5,0.2,0.5,0.5S29.8,38,29.5,38H29v1h0.5
    c0.3,0,0.5,0.2,0.5,0.5S29.8,40,29.5,40H29c0,0-1.4,3-5,3s-5-3-5-3h-0.5c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5H19z M20,39h8v-1h-8
    V39z M20.2,40c0.2,0.3,0.4,0.5,0.7,0.8c0.8,0.8,1.9,1.2,3.2,1.2s2.3-0.5,3.2-1.2c0.3-0.2,0.5-0.5,0.7-0.8H20.2L20.2,40z M20,37h8v-1
    h-8V37z M16.1,7.8c-0.1-0.2,0-0.5,0.2-0.7c0.2-0.1,0.5,0,0.7,0.2l1.6,3.2c0.1,0.2,0,0.5-0.2,0.7c-0.2,0.1-0.5,0-0.7-0.2
    C17.7,11,16.1,7.8,16.1,7.8z M30.2,7.4c0.1-0.2,0.4-0.4,0.7-0.2c0.2,0.1,0.4,0.4,0.2,0.7L29.5,11c-0.1,0.2-0.4,0.4-0.7,0.2
    c-0.2-0.1-0.4-0.4-0.2-0.7C28.6,10.6,30.2,7.4,30.2,7.4z M23.1,6c0-0.3,0.2-0.5,0.5-0.5s0.5,0.2,0.5,0.5v3.2c0,0.3-0.2,0.5-0.5,0.5
    s-0.5-0.2-0.5-0.5V6z M10.8,11.9c-0.2-0.2-0.2-0.5,0-0.7c0.2-0.2,0.5-0.2,0.7,0l2.3,2.4c0.2,0.2,0.2,0.5,0,0.7
    c-0.2,0.2-0.5,0.2-0.7,0C13.1,14.3,10.8,11.9,10.8,11.9z M7.9,17.7c-0.3-0.1-0.4-0.3-0.4-0.6c0.1-0.3,0.3-0.4,0.6-0.4c0,0,0,0,0,0
    l3.1,0.8c0.3,0.1,0.4,0.3,0.4,0.6c-0.1,0.3-0.3,0.4-0.6,0.4c0,0,0,0,0,0C11,18.5,7.9,17.7,7.9,17.7z M39.7,17.7l-3.1,0.8
    c-0.3,0.1-0.5-0.1-0.6-0.4c-0.1-0.3,0.1-0.5,0.3-0.6l3.1-0.8c0.3-0.1,0.5,0.1,0.6,0.4C40.1,17.4,40,17.6,39.7,17.7z M35.7,11.3
    c0.2-0.2,0.5-0.2,0.7,0c0.2,0.2,0.2,0.5,0,0.7c0,0,0,0,0,0l-2.3,2.4c-0.2,0.2-0.5,0.2-0.7,0c-0.2-0.2-0.2-0.5,0-0.7c0,0,0,0,0,0
    L35.7,11.3z M18.8,34c0-5.5-4.8-5.5-4.8-12.6c0-5,4.5-9.4,10-9.4s10,4.4,10,9.4c0,7.1-4.8,7.1-4.8,12.6H18.8z M28.2,33
    c0.2-1.8,0.8-3,2.1-4.7l0.4-0.6c1.6-2.1,2.2-3.5,2.2-6.3c0-4.5-4.1-8.4-9-8.4s-9,3.9-9,8.4c0,2.7,0.6,4.2,2.2,6.3l0.4,0.6
    c1.3,1.7,1.9,3,2.1,4.7C19.8,33,28.2,33,28.2,33z M21.4,15.9c0.3-0.1,0.5,0.1,0.6,0.3c0.1,0.2,0,0.5-0.3,0.6c-1.8,0.7-3.2,2.2-3.9,4
    c-0.1,0.3-0.4,0.4-0.6,0.3c-0.2-0.1-0.4-0.4-0.3-0.6C17.6,18.4,19.3,16.7,21.4,15.9z"/>
</svg>
</div>

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2"
  }
}