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>Table 1</h2>
<table border="0" cellspacing="3" cellpadding="0">
<caption>Most commonly used desktop screen readers in July 2015 as reported in the Webaim Survey</caption>	
	<tr>
		<th scope="col">Screen Reader</th>
		<th scope="col">Percentage of Respondents</th>
	</tr>
	<tr>
		<td>
		<a href="http://www.freedomscientific.com/Products/Blindness/JAWS">
		JAWS</a></td>
		<td>43.7</td>
	</tr>
	<tr>
		<td><a href="http://www.nvaccess.org/">
		NVDA</a></td>
		<td>41.4</td>
	</tr>
	<tr>
		<td><a href="http://www.apple.com/accessibility/osx/voiceover/">
		VoiceOver</a></td>
		<td>30.9</td>
	</tr>
	<tr>
		<td><a href="http://www.gwmicro.com/window-eyes/">
		Window-Eyes</a></td>
		<td>29.6</td>
	</tr>
	<tr>
		<td><a href="http://www.zoomtext.com/products/zoomtext-magnifierreader/">
		ZoomText</a></td>
		<td>27.5</td>
	</tr>
	<tr>
		<td>
		<a href="https://www.satogo.com/">
		System Access To Go</a></td>
		<td>6.9</td>
	</tr>
	<tr>
		<td>
		<a href="http://www.chromevox.com/">
		ChromeVox</a></td>
		<td>2.8</td>
	</tr>
	<tr>
		<td><a href="http://www.disabled-world.com/assistivedevices/computer/screen-readers.php">
		Other</a></td>
		<td>6.5</td>
	</tr>
</table>
<br>
<div id="container" tabindex="1"></div>

JavaScript

$(function () {

    // Plugin for increasing chart accessibility
    (function (H) {
        H.Chart.prototype.callbacks.push(function (chart) {
            var options = chart.options,
                series = chart.series,
                numSeries = series.length,
                numXAxes = chart.xAxis.length,
                numYAxes = chart.yAxis.length,
                tableSummary = document.createElement('caption'),
                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,
                ariaTable,
                tableHeaders,
                chartDesc,
                chartTypes = [],
                chartType,
                typeStartsWithVowel,
                i;

            if (options.accessibility && options.accessibility.enabled === false) {
                return;
            }

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

            // Make chart type string
            for (i = 0; i < numSeries; ++i) {
                if (chartTypes.indexOf(series[i].type) < 0) {
                    chartTypes.push(series[i].type);
                }
            }
            chartType = chartTypes[0];
            for (i = 1; i < chartTypes.length - 1; ++i) {
                chartType += ', ' + chartTypes[i];
            }
            if (chartTypes.length > 1) {
                chartType += ' and ' + chartTypes[chartTypes.length - 1] + ' combination';
            }
            typeStartsWithVowel = !chartType || 'aeiouy'.indexOf(chartType.charAt(0)) > -1;

            // Build chart description
       ...