public/templates/verticalbar.html

<div class="showcase" id="outer-wrapper">
	<link href="{{pathway}}chartcss/verticalbar.css" rel="stylesheet">
	<div class="row" id="furniture">
		<h1 class='chartTitle' id="chartTitle">{{{title}}}</h1>
		<h2 class='subTitle' 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'>
		<div id="annotations"></div>
		<div class="sourceWrapper row">
			<span id="sourceText" row="note">Guardian Graphic {{#source}} | Source: {{{source}}}{{/source}} {{{footnote}}}</span>
		</div>
	</div>
</div>