JSFiddle - React, Tailwind, and code Playground

by oysteinmoseng

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<h1>Table and SVG Chart Depicting Screen Reader Usage</h1>
<h2>Chart 2</h2>
<div id="container" tabindex="1"></div>
<br>
<h2>Table 2</h2>
<table border="0" cellspacing="3" cellpadding="0">
<caption>Most commonly used desktop screen readers from January 2009 to July 2015 as reported in the Webaim Survey</caption>	
	<tr>
		<th scope="col">Screen Reader</th>
		<th scope="col">January 2009</th>
		<th scope="col">December 2010</th>
		<th scope="col">May 2012</th>
		<th scope="col">January 2014</th>
		<th scope="col">July 2015</th>
	</tr>
	<tr>
		<th scope="row"><a href="http://www.freedomscientific.com/Products/Blindness/JAWS">
		JAWS</a></th>
		<td>74</td>
		<td>69.6</td>
		<td valign="top">63.7</td>
		<td valign="top">63.9</td>
		<td valign="top">43.7</td>
	</tr>
	<tr>
		<th scope="row"><a href="http://www.nvaccess.org/">
		NVDA</a></th>
		<td>8</td>
		<td>34.8</td>
		<td valign="top">43.0</td>
		<td valign="top">51.2</td>
		<td valign="top">41.4</td>
	</tr>
	<tr>
		<th scope="row"><a href="http://www.apple.com/accessibility/osx/voiceover/">
		VoiceOver</a></th>
		<td>6</td>
		<td>20.2</td>
		<td valign="top">30.7</td>
		<td valign="top">36.8</td>
		<td valign="top">30.9</td>
	</tr>
	<tr>
		<th scope="row"><a href="http://www.gwmicro.com/window-eyes/">
		Window-Eyes</a></th>
		<td>23</td>
		<td>19.0</td>
		<td valign="top">20.7</td>
		<td valign="top">13.9</td>
		<td valign="top">29.6</td>
	</tr>
	<tr>
		<th scope="row"><a href="http://www.zoomtext.com/products/zoomtext-magnifierreader/">
		ZoomText</a></th>
		<td>&nbsp;</td>
		<td>6.1</td>
		<td valign="top">6.8</td>
		<td valign="top">5.3</td>
		<td valign="top">27.5</td>
	</tr>
	<tr>
		<th scope="row"><a href="https://www.satogo.com/">
		System Access To Go</a></th>
		<td>&nbsp;</td>
		<td>16.2</td>
		<td valign="top">22.1</td>
		<td valign="top">26.2</td>
		<td valign="top">6.9</td>
	</tr>
	<tr>
		<th scope="row"><a...

JavaScript

$(function () {

    // Plugin for increasing chart accessibility
    (function (H) {
        H.Chart.prototype.callbacks.push(function (chart) {
            var options = chart.options,
                acsOptions = options.accessibility || {},
                series = chart.series,
                numSeries = series.length,
                numXAxes = chart.xAxis.length,
                numYAxes = chart.yAxis.length,
                titleElement = document.createElementNS('http://www.w3.org/2000/svg', 'title'),
                descElement = chart.container.getElementsByTagName('desc')[0],
                textElements = chart.container.getElementsByTagName('text'),
                titleId = 'highcharts-title-' + chart.index,
                descId = 'highcharts-desc-' + chart.index,
                chartDesc,
                chartTypes = [],
                i;

            if (!acsOptions.enabled) {
                return;
            }

            // Hide text elements from screen readers
            for (i = 0; i < textElements.length; ++i) {
                textElements[i].setAttribute('aria-hidden', 'true');
            }

            // Enumerate chart types
            for (i = 0; i < numSeries; ++i) {
                if (chartTypes.indexOf(series[i].type) < 0) {
                    chartTypes.push(series[i].type);
                }
            }

            // Build chart description
            chartDesc = (chartTypes.length === 1 ? chartTypes[0] + ' chart, ' : '') +
                        (options.title.text ? ' Title: ' + options.title.text + '.' : '') +
                        (options.subtitle.text ? ' ' + options.subtitle.text + '.' : '') +
                        (acsOptions.description ? ' ' + acsOptions.description : '');
            chartDesc += (chartDesc.slice(-1) !== '.' ? '.' : '') +
                        (!numSeries ? ' The chart is empty.' : '');

            // Add axis info
            if (numXAxes) {
                chartDesc += '...