public/templates/linechart.html

<div id="outer-wrapper" class="showcase">
  <link href="{{pathway}}chartcss/linechart.css" rel="stylesheet" />
  <div class="row" id="furniture">
    <h1 class="chartTitle row" id="chartTitle">{{{title}}}</h1>
    <h2 class="subTitle row" id="subTitle">{{{subtitle}}}</h2>
    
    <div class="row">
      <div class="notes" id="chartKey" aria-hidden="true"></div>
      <span id="showAudioControls" aria-hidden="true">play</span>
    </div>
    <div class="audioControls sr-only" id="audioControls">
      <div id="buttonContainer"></div>
      <div class="notes small" tabindex="0">This chart has an audio option for accessibility. Press space or the control buttons to play and pause the chart, R to replay, A and D to step through a data series point-by-point, and W and S to switch data series. Contact <a href="mailto:nick.evershed@theguardian.com">nick.evershed@theguardian.com</a> about bugs or issues</div>
    </div>
  </div>
  <figure role="img" class="row chartSans" id="graphicContainer" aria-label="This chart has an audio option for accessibility. Press space or the control buttons below to play and pause the chart, R to replay, A and D to step through a data series point-by-point, and W and S to switch data series" tabindex="0"></figure>
	<div class='footer offset row'>
		<div id="annotations"></div>
    <div class="sourceWrapper row">
		  <span id="sourceText" role="note">Guardian Graphic {{#source}} | Source: {{{source}}}{{/source}} {{{footnote}}}</span>
      
    </div>
	</div>
 
</div>