├── README.md
├── includes
    └── export-csv.js
├── highcharts-accessible.js
└── example.html


/README.md:
--------------------------------------------------------------------------------
 1 | # highcharts-accessible
 2 | This plugin improves accessibility of the graphs rendered by Highcharts.  
 3 | Full documenation at http://seth-myers.github.io/highcharts-accessible/  
 4 | Live example at http://seth-myers.com/highcharts-accessible/
 5 | 
 6 | ## About
 7 | **This only works with bar, column, line and pie charts so far. Will be adding more chart types later.**
 8 | 
 9 | It works by automatically applying three best practices for accessible SVGs.
10 | 
11 | 1. Automatically creates and inserts intelligent title and description tags.
12 | 2. Inserts ARIA attributes and language definition in the SVG to further optimize the chart for screen readers
13 | 3. Automatically inserts a link to a downloadable CSV of the data.
14 | 
15 | Highchart SVG rendered **without** the plugin:
16 | ![alt text](https://github.com/seth-myers/highcharts-accessible/blob/gh-pages/images/without.png "Highchart SVG rendered without the plugin")
17 | 
18 | Highchart SVG rendered **with** the plugin:
19 | ![alt text](https://github.com/seth-myers/highcharts-accessible/blob/gh-pages/images/with.png "https://github.com/seth-myers/highcharts-accessible/blob/gh-pages/images/with.png")
20 | 
21 | ## Dependency
22 | Include the [export-csv.js](http://www.highcharts.com/plugin-registry/single/7/Export%20Data "export-csv.js download page") plugin to enable the CSV functionality.
23 | 
24 | ## Installation
25 | Import this plugin after `highcharts.js` and `export-csv.js`, like this:
26 | ```
27 | <script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
28 | <script type="text/javascript" src="export-csv.js"></script>
29 | <script type="text/javascript" src="highcharts-accessible.js"></script>
30 | ```
31 | ## Usage
32 | All parameters are optional, but `accessibleSettings: {}` must be called in order to run the plugin.
33 | ```javascript
34 | $("#container").highcharts({  
35 |   accessibleSettings: {  
36 | ```
37 | 
38 | > **autoAccessible: Boolean**  
39 | > Allow a summary of the chart to be written automatically. This is the primary purpose of the plugin. If set to false, a user-defined title and description must be provided. Defaults to `true`.  
40 |     
41 | > **csvLinkText: String**  
42 | > Text used in link to download a CSV file. If you have more than one highchart SVG on a page, it is important to add text that helps users associate the link with the chart. Defaults to “Download chart data.”.
43 | 
44 | > **langAttribute: String**  
45 | > Change the language attribute for the SVG. [More information](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xml:lang "Mozilla SVG lang") on lang attribute. Defaults to “en” for English.  
46 | 
47 | > **timeSeries:Boolean**  
48 | > Indicate if the dataset has a time element. This affects how the autoAccessible feature process the text. Defaults to `true`.  
49 | 
50 | > **userDesc: String**  
51 | > Text to be used in the SVG’s description tag. This will override the autoAccessible feature. I recommend using this option and writing your own summary of what the chart shows. It will likely be more readable than what the autoAccessible script can generate. Defaults to `null`.  
52 | 
53 | > **userTitle: String**  
54 | > Text to be used in the SVG’s title tag. If this is tag is not used, access will use the text in highchart’s title.text in the SVG title tag. If that is empty, it defaults to "This is a data visualization. Please see the following description tag for a synopsis of what it shows.".  
55 | 
56 | > **xUnitPrefix: String**  
57 | > Text to prepend to the x value in the description tag. Defaults to empty string.
58 | 
59 | > **xUnitSuffix: String**  
60 | > Text to append to the x value in the description tag. Defaults to empty string.
61 | 
62 | > **yUnitPrefix: String**  
63 | > Text to prepend to the y value in the description tag. Defaults to empty string.
64 | 
65 | > **yUnitSuffix: String**  
66 | > Text to append to the y value in the description tag. Defaults to empty string.
67 | 
68 | ```javascript
69 |   }  
70 | });  
71 | ```
72 | 
73 | *"Inclusive design is good design."*
74 | 


--------------------------------------------------------------------------------
/includes/export-csv.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * A Highcharts plugin for exporting data from a rendered chart as CSV, XLS or HTML table
  3 |  *
  4 |  * Author:   Torstein Honsi
  5 |  * Licence:  MIT
  6 |  * Version:  1.4.1
  7 |  */
  8 | /*global Highcharts, window, document, Blob */
  9 | (function (factory) {
 10 |     if (typeof module === 'object' && module.exports) {
 11 |         module.exports = factory;
 12 |     } else {
 13 |         factory(Highcharts);
 14 |     }
 15 | })(function (Highcharts) {
 16 | 
 17 |     'use strict';
 18 | 
 19 |     var each = Highcharts.each,
 20 |         pick = Highcharts.pick,
 21 |         downloadAttrSupported = document.createElement('a').download !== undefined;
 22 | 
 23 |     Highcharts.setOptions({
 24 |         lang: {
 25 |             downloadCSV: 'Download CSV',
 26 |             downloadXLS: 'Download XLS',
 27 |             viewData: 'View data table'
 28 |         }
 29 |     });
 30 | 
 31 | 
 32 |     /**
 33 |      * Get the data rows as a two dimensional array
 34 |      */
 35 |     Highcharts.Chart.prototype.getDataRows = function () {
 36 |         var options = (this.options.exporting || {}).csv || {},
 37 |             xAxis = this.xAxis[0],
 38 |             rows = {},
 39 |             rowArr = [],
 40 |             dataRows,
 41 |             names = [],
 42 |             i,
 43 |             x,
 44 |             xTitle = xAxis.options.title && xAxis.options.title.text,
 45 | 
 46 |             // Options
 47 |             dateFormat = options.dateFormat || '%Y-%m-%d %H:%M:%S',
 48 |             columnHeaderFormatter = options.columnHeaderFormatter || function (series, key, keyLength) {
 49 |                 return series.name + (keyLength > 1 ? ' ('+ key + ')' : '');
 50 |             };
 51 | 
 52 |         // Loop the series and index values
 53 |         i = 0;
 54 |         each(this.series, function (series) {
 55 |             var keys = series.options.keys,
 56 |                 pointArrayMap = keys || series.pointArrayMap || ['y'],
 57 |                 valueCount = pointArrayMap.length,
 58 |                 requireSorting = series.requireSorting,
 59 |                 categoryMap = {},
 60 |                 j;
 61 | 
 62 |             // Map the categories for value axes
 63 |             each(pointArrayMap, function (prop) {
 64 |                 categoryMap[prop] = (series[prop + 'Axis'] && series[prop + 'Axis'].categories) || [];
 65 |             });
 66 | 
 67 |             if (series.options.includeInCSVExport !== false && series.visible !== false) { // #55
 68 |                 j = 0;
 69 |                 while (j < valueCount) {
 70 |                     names.push(columnHeaderFormatter(series, pointArrayMap[j], pointArrayMap.length));
 71 |                     j = j + 1;
 72 |                 }
 73 | 
 74 |                 each(series.points, function (point, pIdx) {
 75 |                     var key = requireSorting ? point.x : pIdx,
 76 |                         prop,
 77 |                         val;
 78 | 
 79 |                     j = 0;
 80 | 
 81 |                     if (!rows[key]) {
 82 |                         rows[key] = [];
 83 |                     }
 84 |                     rows[key].x = point.x;
 85 | 
 86 |                     // Pies, funnels etc. use point name in X row
 87 |                     if (!series.xAxis) {
 88 |                         rows[key].name = point.name;
 89 |                     }
 90 | 
 91 |                     while (j < valueCount) {
 92 |                         prop = pointArrayMap[j]; // y, z etc
 93 |                         val = point[prop];
 94 |                         rows[key][i + j] = pick(categoryMap[prop][val], val); // Pick a Y axis category if present
 95 |                         j = j + 1;
 96 |                     }
 97 | 
 98 |                 });
 99 |                 i = i + j;
100 |             }
101 |         });
102 | 
103 |         // Make a sortable array
104 |         for (x in rows) {
105 |             if (rows.hasOwnProperty(x)) {
106 |                 rowArr.push(rows[x]);
107 |             }
108 |         }
109 |         // Sort it by X values
110 |         rowArr.sort(function (a, b) {
111 |             return a.x - b.x;
112 |         });
113 | 
114 |         // Add header row
115 |         if (!xTitle) {
116 |             xTitle = xAxis.isDatetimeAxis ? 'DateTime' : 'Category';
117 |         }
118 |         dataRows = [[xTitle].concat(names)];
119 | 
120 |         // Transform the rows to CSV
121 |         each(rowArr, function (row) {
122 | 
123 |             var category = row.name;
124 |             if (!category) {
125 |                 if (xAxis.isDatetimeAxis) {
126 |                     category = Highcharts.dateFormat(dateFormat, row.x);
127 |                 } else if (xAxis.categories) {
128 |                     category = pick(xAxis.names[row.x], xAxis.categories[row.x], row.x)
129 |                 } else {
130 |                     category = row.x;
131 |                 }
132 |             }
133 | 
134 |             // Add the X/date/category
135 |             row.unshift(category);
136 |             dataRows.push(row);
137 |         });
138 | 
139 |         return dataRows;
140 |     };
141 | 
142 |     /**
143 |      * Get a CSV string
144 |      */
145 |     Highcharts.Chart.prototype.getCSV = function (useLocalDecimalPoint) {
146 |         var csv = '',
147 |             rows = this.getDataRows(),
148 |             options = (this.options.exporting || {}).csv || {},
149 |             itemDelimiter = options.itemDelimiter || ',', // use ';' for direct import to Excel
150 |             lineDelimiter = options.lineDelimiter || '\n'; // '\n' isn't working with the js csv data extraction
151 | 
152 |         // Transform the rows to CSV
153 |         each(rows, function (row, i) {
154 |             var val = '',
155 |                 j = row.length,
156 |                 n = useLocalDecimalPoint ? (1.1).toLocaleString()[1] : '.';
157 |             while (j--) {
158 |                 val = row[j];
159 |                 if (typeof val === "string") {
160 |                     val = '"' + val + '"';
161 |                 }
162 |                 if (typeof val === 'number') {
163 |                     if (n === ',') {
164 |                         val = val.toString().replace(".", ",");
165 |                     }
166 |                 }
167 |                 row[j] = val;
168 |             }
169 |             // Add the values
170 |             csv += row.join(itemDelimiter);
171 | 
172 |             // Add the line delimiter
173 |             if (i < rows.length - 1) {
174 |                 csv += lineDelimiter;
175 |             }
176 |         });
177 |         return csv;
178 |     };
179 | 
180 |     /**
181 |      * Build a HTML table with the data
182 |      */
183 |     Highcharts.Chart.prototype.getTable = function (useLocalDecimalPoint) {
184 |         var html = '<table>',
185 |             rows = this.getDataRows();
186 | 
187 |         // Transform the rows to HTML
188 |         each(rows, function (row, i) {
189 |             var tag = i ? 'td' : 'th',
190 |                 val,
191 |                 j,
192 |                 n = useLocalDecimalPoint ? (1.1).toLocaleString()[1] : '.';
193 | 
194 |             html += '<tr>';
195 |             for (j = 0; j < row.length; j = j + 1) {
196 |                 val = row[j];
197 |                 // Add the cell
198 |                 if (typeof val === 'number') {
199 |                     val = val.toString();
200 |                     if (n === ',') {
201 |                         val = val.replace('.', n);
202 |                     }
203 |                     html += '<' + tag + ' class="number">' + val + '</' + tag + '>';
204 | 
205 |                 } else {
206 |                     html += '<' + tag + '>' + (val === undefined ? '' : val) + '</' + tag + '>';
207 |                 }
208 |             }
209 | 
210 |             html += '</tr>';
211 |         });
212 |         html += '</table>';
213 |         return html;
214 |     };
215 | 
216 |     function getContent(chart, href, extension, content, MIME) {
217 |         var a,
218 |             blobObject,
219 |             name,
220 |             options = (chart.options.exporting || {}).csv || {},
221 |             url = options.url || 'http://www.highcharts.com/studies/csv-export/download.php';
222 | 
223 |         if (chart.options.exporting.filename) {
224 |             name = chart.options.exporting.filename;
225 |         } else if (chart.title) {
226 |             name = chart.title.textStr.replace(/ /g, '-').toLowerCase();
227 |         } else {
228 |             name = 'chart';
229 |         }
230 | 
231 |         // MS specific. Check this first because of bug with Edge (#76)
232 |         if (window.Blob && window.navigator.msSaveOrOpenBlob) {
233 |             // Falls to msSaveOrOpenBlob if download attribute is not supported
234 |             blobObject = new Blob([content]);
235 |             window.navigator.msSaveOrOpenBlob(blobObject, name + '.' + extension);
236 | 
237 |         // Download attribute supported
238 |         } else if (downloadAttrSupported) {
239 |             a = document.createElement('a');
240 |             a.href = href;
241 |             a.target = '_blank';
242 |             a.download = name + '.' + extension;
243 |             document.body.appendChild(a);
244 |             a.click();
245 |             a.remove();
246 | 
247 |         } else {
248 |             // Fall back to server side handling
249 |             Highcharts.post(url, {
250 |                 data: content,
251 |                 type: MIME,
252 |                 extension: extension
253 |             });
254 |         }
255 |     }
256 | 
257 |     /**
258 |      * Call this on click of 'Download CSV' button
259 |      */
260 |     Highcharts.Chart.prototype.downloadCSV = function () {
261 |         var csv = this.getCSV(true);
262 |         getContent(
263 |             this,
264 |             'data:text/csv,' + csv.replace(/\n/g, '%0A'),
265 |             'csv',
266 |             csv,
267 |             'text/csv'
268 |         );
269 |     };
270 | 
271 |     /**
272 |      * Call this on click of 'Download XLS' button
273 |      */
274 |     Highcharts.Chart.prototype.downloadXLS = function () {
275 |         var uri = 'data:application/vnd.ms-excel;base64,',
276 |             template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40">' +
277 |                 '<head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>' +
278 |                 '<x:Name>Ark1</x:Name>' +
279 |                 '<x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->' +
280 |                 '<style>td{border:none;font-family: Calibri, sans-serif;} .number{mso-number-format:"0.00";}</style>' +
281 |                 '<meta name=ProgId content=Excel.Sheet>' +
282 |                 '</head><body>' +
283 |                 this.getTable(true) +
284 |                 '</body></html>',
285 |             base64 = function (s) { 
286 |                 return window.btoa(unescape(encodeURIComponent(s))); // #50
287 |             };
288 |         getContent(
289 |             this,
290 |             uri + base64(template),
291 |             'xls',
292 |             template,
293 |             'application/vnd.ms-excel'
294 |         );
295 |     };
296 | 
297 |     /**
298 |      * View the data in a table below the chart
299 |      */
300 |     Highcharts.Chart.prototype.viewData = function () {
301 |         if (!this.insertedTable) {
302 |             var div = document.createElement('div');
303 |             div.className = 'highcharts-data-table';
304 |             // Insert after the chart container
305 |             this.renderTo.parentNode.insertBefore(div, this.renderTo.nextSibling);
306 |             div.innerHTML = this.getTable();
307 |             this.insertedTable = true;
308 |         }
309 |     };
310 | 
311 | 
312 |     // Add "Download CSV" to the exporting menu. Use download attribute if supported, else
313 |     // run a simple PHP script that returns a file. The source code for the PHP script can be viewed at
314 |     // https://raw.github.com/highslide-software/highcharts.com/master/studies/csv-export/csv.php
315 |     if (Highcharts.getOptions().exporting) {
316 |         Highcharts.getOptions().exporting.buttons.contextButton.menuItems.push({
317 |             textKey: 'downloadCSV',
318 |             onclick: function () { this.downloadCSV(); }
319 |         }, {
320 |             textKey: 'downloadXLS',
321 |             onclick: function () { this.downloadXLS(); }
322 |         }, {
323 |             textKey: 'viewData',
324 |             onclick: function () { this.viewData(); }
325 |         });
326 |     }
327 | 
328 | });
329 | 


--------------------------------------------------------------------------------
/highcharts-accessible.js:
--------------------------------------------------------------------------------
  1 | // Accessible SVG resources
  2 | // http://www.w3.org/TR/SVG/access.html#SVGAccessibilityGuidelines
  3 | // http://www.idpf.org/accessibility/guidelines/
  4 | 
  5 | // TODO
  6 | // add ONKEYPRESS handler if ONCLICK hanlder was added by highcharts (Not a normal function of highcharts, but it can be done.)
  7 | // add autoAccessible functinality for remaining charts
  8 | (function(H) {
  9 | 
 10 |     H.wrap(H.Chart.prototype, 'init', function(proceed) {
 11 | 
 12 |         // Do not run accesssibility if it wasn't setup by user
 13 |         if (!arguments[1].accessibleSettings) {
 14 |             proceed.apply(this, Array.prototype.slice.call(arguments, 1));
 15 |             return;
 16 |         }
 17 | 
 18 |         // set options
 19 |         var accOptions = {
 20 |             approvedTypes: ['bar', 'column', 'line', 'pie'],
 21 |             autoAccessible: (arguments[1].accessibleSettings.autoAccessible === undefined) ? true : arguments[1].accessibleSettings.autoAccessible, // default to auto-accessible feature on
 22 |             chartType: findChartTypes(arguments[1]),
 23 |             csvLinkText: arguments[1].accessibleSettings.csvLinkText || "Download chart data.",
 24 |             langAttribute: arguments[1].accessibleSettings.langAttribute || "en", // default to english,
 25 |             timeSeries: (arguments[1].accessibleSettings.timeSeries === undefined) ? true : arguments[1].accessibleSettings.timeSeries, // default to time series
 26 |             userDesc: arguments[1].accessibleSettings.desc || null,
 27 |             userTitle: arguments[1].accessibleSettings.title || null,
 28 |             xUnitPrefix: arguments[1].accessibleSettings.xUnitPrefix || "",
 29 |             xUnitSuffix: arguments[1].accessibleSettings.xUnitSuffix || "",
 30 |             yUnitPrefix: arguments[1].accessibleSettings.yUnitPrefix || "",
 31 |             yUnitSuffix: arguments[1].accessibleSettings.yUnitSuffix || ""
 32 |         };
 33 | 
 34 | 
 35 | 
 36 |         // Ensure title and desc text are entered if the autoAccessible feature is off.
 37 |         if (!accOptions.autoAccessible && !accOptions.userTitle || !accOptions.autoAccessible && !accOptions.userDesc) {
 38 |             throw "highcharts-accessible plugin error: A description and title must be provided if the autoAccessible feature is set to false.";
 39 |         }
 40 | 
 41 |         // Let highcharts make the chart.
 42 |         proceed.apply(this, Array.prototype.slice.call(arguments, 1));
 43 | 
 44 |         // Add manually-entered title and desc tags if autoAccessible feature is off.
 45 |         if (!accOptions.autoAccessible) {
 46 |             setTags(accOptions.userTitle, accOptions.userDesc, this, accOptions);
 47 |             return;
 48 |         }
 49 | 
 50 |         var titleToPost = processTitle(accOptions, this);
 51 |         var descToPost = processDesc(accOptions, this);
 52 | 
 53 |         // add the new tags and ARIA attributes
 54 |         setTags(titleToPost, descToPost, this, accOptions);
 55 | 
 56 |         // Add CSV download, if dependency not available suggest user adds export-csv.js to automatically allow for CSV download
 57 |         if (typeof this.getCSV !== 'function') {
 58 |             console.warn('highcharts-accessible plugin warning: please load the export-csv.js plugin to enable CSV download functionality: http://www.highcharts.com/plugin-registry/single/7/Export%20Data ');
 59 |         } else {
 60 |             csvDownload(this.getCSV(), this.renderTo.id, accOptions);
 61 |         };
 62 | 
 63 |     });
 64 | 
 65 |     // return string for the description tag
 66 |     // in highcharts, data is generally y-vals and dates/labels are x-vals
 67 |     function processDesc(o, d) {
 68 | 
 69 |         // return user-supplied desc to access if available
 70 |         if (o.userDesc) {
 71 |             return o.userDesc;
 72 |         }
 73 | 
 74 |         var theReturn = "";
 75 |         var series = d.series;
 76 | 
 77 |         // number of data points combined. 
 78 |         // This is used to keep the descriptions from getting too long.
 79 |         var combinedSeriesLen = series[0].data.length * series.length;
 80 | 
 81 |         for (var i = 0; i < series.length; i++) {
 82 |             var s = series[i];
 83 |             var seriesType = o.chartType[i];
 84 |             var xVals = s.processedXData;
 85 |             var xValsLen = xVals.length;
 86 |             var xLabels = get(s, 'xAxis.categories')
 87 |             var yVals = s.processedYData;
 88 |             var yValsLen = yVals.length;
 89 |             var yValsHighLow = getHighLow(yVals); // use this to build the bar time series chart, say which date is highest/lowest for each data series
 90 |             var sName = s.name;
 91 | 
 92 |             // Warn if this chart type isn't currently supported.
 93 |             if (o.approvedTypes.indexOf(seriesType) < 0) {
 94 |                 console.log("highcharts-accessible plugin error: This chart type is still in development. Access can only process " + o.approvedTypes.toString() + " charts. This data series will not be added to the description.");
 95 |                 continue;
 96 |             }
 97 | 
 98 |             // These build the string to place into the desc tag
 99 |             // format text for pie chart, describe each series
100 |             if (seriesType == 'pie') {
101 |                 var total = yVals.reduce(function(a, b) {
102 |                     return a + b;
103 |                 });
104 |                 for (var ii = 0; ii < xValsLen; ii++) {
105 |                     theReturn += s.data[ii].name + " " + o.yUnitPrefix + yVals[ii] + o.yUnitSuffix + ", " + round((yVals[ii] / total * 100), 1) + "% of the total. ";
106 |                 }
107 |             }
108 | 
109 |             if (o.timeSeries) {
110 |                 // format text for time series	
111 |                 if (seriesType == 'line' || seriesType == 'bar' || seriesType == 'column') {
112 |                     theReturn += sName + " " + getDirection(yVals[0], yVals[yValsLen - 1]) + " to " + o.yUnitPrefix + yVals[yValsLen - 1] + o.yUnitSuffix + " in " + o.xUnitPrefix + xVals[xValsLen - 1] + o.xUnitSuffix + " from " + o.yUnitPrefix + yVals[0] + o.yUnitSuffix + " in " + o.xUnitPrefix + xVals[0] + o.xUnitSuffix + ". " + sName + " peaked at " + o.yUnitPrefix + yValsHighLow.high[0] + o.yUnitSuffix + " in " + o.xUnitPrefix + xVals[yValsHighLow.high[1]] + o.xUnitSuffix + ", and dipped lowest to " + o.yUnitPrefix + yValsHighLow.low[0] + o.yUnitSuffix + " in " + o.xUnitPrefix + xVals[yValsHighLow.low[1]] + ". ";
113 |                 }
114 |             } else {
115 |                 // format text for nominal series
116 |                 // list all values if there are less than 15 data points in the whole chart
117 |                 if (combinedSeriesLen < 15) {
118 |                     if (seriesType == 'line' || seriesType == 'bar' || seriesType == 'column') {
119 |                         for (var ii = 0; ii < xValsLen; ii++) {
120 |                             theReturn += o.xUnitPrefix + yVals[ii] + o.xUnitSuffix + ", " + xLabels[ii] + ", " + sName + ". ";
121 |                         }
122 |                     }
123 |                     // otherwise just say the high, low for each series
124 |                 } else {
125 |                     if (seriesType == 'line' || seriesType == 'bar' || seriesType == 'column') {
126 |                         theReturn += sName + ", highest value of " + o.yUnitPrefix + yValsHighLow.high[0] + o.yUnitSuffix + " for " + xLabels[yValsHighLow.high[1]] + ". " + sName + ", lowest value of " + o.yUnitPrefix + yValsHighLow.low[0] + o.yUnitSuffix + " for " + xLabels[yValsHighLow.low[1]] + ". ";
127 |                     }
128 |                 }
129 |             }
130 |         }
131 | 
132 |         if (theReturn == "") {
133 |             return "This chart format is not yet supported by the Accessible Highcharts plugin. Please see the link below to download the data.";
134 |         } else {
135 |             return theReturn;
136 |         }
137 |     }
138 | 
139 |     function processTitle(o, d) {
140 | 
141 |         // return user-supplied title to access if available
142 |         if (o.userTitle) {
143 |             return o.userTitle;
144 |         }
145 | 
146 |         // if not, try to use the title given to highcharts.js
147 |         var hgTitle = get(d, 'userOptions.title.text');
148 |         if (hgTitle && hgTitle != "") {
149 |             return hgTitle;
150 |         }
151 | 
152 |         // otherwise say its a chart and direct folks to the description tag
153 |         return "This is a data visualization. Please see the following description tag for a synopsis of what it shows.";
154 |     }
155 | 
156 |     // Not sure if download attribute or opening new window is better
157 |     // Both approaches seem to have the same result
158 |     function csvDownload(d, chartID, userOptions) {
159 | 
160 |         // denote when the CSV file ends per 508-coordinator
161 |         d += '\nEnd of File';
162 | 
163 |         var theSVG = document.getElementById(chartID);
164 |         var newlinkNode = document.createElement("a");
165 |         var newlinkContent = document.createTextNode(userOptions.csvLinkText);
166 |         newlinkNode.appendChild(newlinkContent);
167 |         newlinkNode.setAttribute("href", "data:text/csv;charset=utf-8," + escape(d));
168 |         newlinkNode.setAttribute("download", "chart-data.csv");
169 |         theSVG.appendChild(newlinkNode);
170 | 
171 |         // newlinkNode.onclick = function() {
172 |         // 	//window.open( "data:text/csv;charset=utf-8," + escape(d) );
173 |         // };
174 |     }
175 | 
176 |     // get chart type for each series item
177 |     // return array of chart types
178 |     function findChartTypes(d) {
179 | 
180 |         var theReturn = [];
181 |         var chartSeries = get(d, 'chart.type');
182 | 
183 |         for (var i = 0; i < d.series.length; i++) {
184 | 
185 |             var seriesString = 'd.series[' + i + '].type';
186 | 
187 |             if (get(d, seriesString)) {
188 |                 theReturn.push(d.series[i].type)
189 |             } else if (chartSeries) {
190 |                 theReturn.push(chartSeries)
191 |             } else {
192 |                 theReturn.push('line');
193 |             }
194 | 
195 |         }
196 |         return theReturn;
197 |     }
198 | 
199 |     // return object of arrays high/low value and index position
200 |     // { high: [val, index], low: [val, index] }
201 |     function getHighLow(d) {
202 |         var theReturn = {
203 |             high: [d[0], 0],
204 |             low: [d[0], 0]
205 |         };
206 |         for (var i = 0; i < d.length; i++) {
207 | 
208 |             if (d[i] > theReturn.high[0]) {
209 |                 theReturn.high = [d[i], i];
210 |             }
211 |             if (d[i] < theReturn.low[0]) {
212 |                 theReturn.low = [d[i], i];
213 |             }
214 |         }
215 |         return theReturn;
216 |     }
217 | 
218 |     function getDirection(s, e) {
219 |         var equal;
220 |         var text;
221 |         if (s == e) {
222 |             return 'did not change';
223 |         } else {
224 |             return s < e ? 'increased' : 'decreased';
225 |         }
226 |     }
227 | 
228 |     // http://stackoverflow.com/questions/23808928/javascript-elegant-way-to-check-nested-object-properties-for-null-undefined
229 |     function get(obj, key) {
230 |         return key.split(".").reduce(function(o, x) {
231 |             return (typeof o == "undefined" || o === null) ? o : o[x];
232 |         }, obj);
233 |     }
234 | 
235 |     function round(num, places) {
236 |         var multiplier = Math.pow(10, places);
237 |         return Math.round(num * multiplier) / multiplier;
238 |     }
239 | 
240 |     // add desc and title tags with ARIA attributres, add lang attibute to SVG
241 |     function setTags(tTag, dTag, chartData, userOptions) {
242 | 
243 |         //console.log(userOptions);
244 | 
245 |         var chartID = chartData.renderTo.id;
246 |         var theSVG = document.getElementById(chartID).firstChild.firstChild;
247 |         var descNode = theSVG.firstChild;
248 | 
249 |         // add lang attribute to SVG tag
250 |         theSVG.setAttribute("xml:lang", userOptions.langAttribute);
251 | 
252 |         // add ID to desc node for ARIA
253 |         descNode.setAttribute("id", chartID + "-accessible-desc");
254 | 
255 |         descText = descNode.firstChild.nodeValue = dTag;
256 | 
257 |         var newTitleNode = document.createElement("title");
258 |         var newTitleContent = document.createTextNode(tTag);
259 |         newTitleNode.appendChild(newTitleContent);
260 | 
261 |         // add ID to title node for Aria
262 |         newTitleNode.setAttribute("id", chartID + "-accessible-title");
263 | 
264 |         // insert the titgle tag at the beginning of the svg
265 |         theSVG.insertBefore(newTitleNode, descNode);
266 | 
267 |         // set ARIA attributes on SVG tag
268 |         theSVG.setAttribute("aria-labelledby", chartID + "-accessible-title");
269 |         theSVG.setAttribute("aria-describedby", chartID + "-accessible-desc");
270 |     }
271 | 
272 | }(Highcharts));
273 | 


--------------------------------------------------------------------------------
/example.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 | 	<title>Accessibility Test for Highcharts Plugin</title>
  5 | 	<meta charset="utf-8" />
  6 | 
  7 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 | 	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/4.3.2/css/normalize.css">
  9 | 	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/4.3.2/css/foundation.min.css">
 10 | 	
 11 | 	<style>
 12 | 	
 13 | 	
 14 | 		
 15 | 	</style>
 16 | 
 17 | </head>
 18 | <body>
 19 | 
 20 | 	<div class="row">
 21 | 		<div class="large-12 columns">
 22 | 
 23 | 			<h1>Accessibility Test for Highcharts Plugin</h1>
 24 | 			<p>This plugin automatically adds intelligent title and description tags to SVG charts rendered by Highcharts. It also adds ARIA attributes to bolster accessibility, as well as dynamically creates a CSV file for download.</p>
 25 | 
 26 | 			<!-- start test 1 -->
 27 | 			<div id="test1">
 28 | 				<h2>Line Chart Test</h2>
 29 | 				<div id="line-chart"></div>
 30 | 			</div>
 31 | 			<!-- end test 1 -->
 32 | 			<hr>
 33 | 			<!-- start test 2 -->
 34 | 			<div id="test2">
 35 | 				<h2>Bar Chart Test</h2>
 36 | 				<div id="bar-chart"></div>
 37 | 			</div>
 38 | 			<!-- end test 2 -->
 39 | 			<hr>
 40 | 			<!-- start test 3 -->
 41 | 			<div id="test3">
 42 | 				<h2>Column Chart Test</h2>
 43 | 				<div id="column-chart"></div>
 44 | 			</div>
 45 | 			<!-- end test 3 -->
 46 | 			<hr>
 47 | 			<!-- start test 4 -->
 48 | 			<div id="test4">
 49 | 				<h2>Pie Chart Test</h2>
 50 | 				<div id="pie-chart"></div>
 51 | 			</div>
 52 | 			<!-- end test 4 -->
 53 |             <hr>
 54 |             <!-- start test 5 -->
 55 |             <div id="test5">
 56 |                 <h2>Nominal Series Test</h2>
 57 |                 <div id="nominal-chart"></div>
 58 |             </div>
 59 |             <!-- end test 5 -->
 60 | 
 61 | 		</div> <!-- end large-12 -->
 62 | 	</div> <!-- end row -->
 63 | 
 64 | 
 65 | 	<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
 66 | 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/foundation/4.3.2/js/foundation.min.js"></script>
 67 | 	<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
 68 | 	<script type="text/javascript" src="includes/export-csv.js"> </script>
 69 | 	<script type="text/javascript" src="highcharts-accessible.js"> </script>
 70 | 
 71 | 	<script type="text/javascript">
 72 | 
 73 |     jQuery(document).ready(function($){
 74 | 
 75 |     	// set standard colors
 76 |     	Highcharts.setOptions({
 77 | 	        colors: ['#8E3200', '#245064', '#797039']
 78 | 	    });
 79 | 
 80 |     	// start  test 1
 81 |     	$('#line-chart').highcharts({
 82 |     		accessibleSettings: {
 83 |     			autoAccessible: true,
 84 |     			timeSeries: true,
 85 |     			yUnitSuffix: "%",
 86 |                 csvLinkText: "Download chart data for Texas Firm Rates."
 87 |     		},
 88 |     		credits: {
 89 | 	            enabled: false
 90 | 	        },
 91 | 	        title: {
 92 | 	            text: 'Texas Firm Entry, Exit And Reallocation Rates, 1982–2013'
 93 | 	        },
 94 | 	        subtitle: {
 95 | 	            text: ''
 96 | 	        },
 97 | 	        yAxis: {
 98 | 	            title: {
 99 | 	                text: ''
100 | 	            }
101 | 	        },
102 | 	        tooltip: {
103 | 	            valueSuffix: '%',
104 | 	            shared: true
105 | 	        },
106 | 	        legend: {
107 | 	            borderWidth: 0
108 | 	        },
109 | 	        plotOptions: {
110 | 		        series: {
111 | 		        	animation: false,
112 | 		            pointStart: Date.UTC(1982, 0, 1),
113 | 		            pointInterval: 31536000000, // seconds per year
114 | 		            marker: {
115 | 		            	enabled: false,
116 | 		            	symbol: 'circle'
117 | 		            }
118 | 		        }
119 | 		    },
120 | 	        series: [{
121 | 	        	//type: 'line',
122 | 	            name: 'Texas entry rates',
123 | 	            data: [[1982, 16.1], [1983, 14.2], [1984, 14.9], [1985, 14.5], [1986, 13.9], [1987, 13.1], [1988, 11.6], [1989, 11.5], [1990, 12.0], [1991, 12.2], [1992, 12.1], [1993, 12.0], [1994, 12.3], [1995, 12.1], [1996, 12.1], [1997, 11.8], [1998, 11.5], [1999, 10.9], [2000, 10.5], [2001, 10.3], [2002, 10.8], [2003, 10.8], [2004, 10.8], [2005, 10.9], [2006, 10.9], [2007, 10.6], [2008, 10.3], [2009, 9.1], [2010, 8.8], [2011, 9.2], [2012, 9.4], [2013, 9.1]]
124 | 	        }, {
125 | 	        	//type: 'bar',
126 | 	            name: 'Texas exit rates',
127 | 	            data: [[1982, 8.2], [1983, 10.5], [1984, 10.6], [1985, 9.8], [1986, 11.2], [1987, 12.6], [1988, 12.7], [1989, 11.2], [1990, 9.6], [1991, 8.7], [1992, 9.4], [1993, 9.0], [1994, 9.0], [1995, 9.1], [1996, 9.2], [1997, 9.5], [1998, 9.4], [1999, 9.6], [2000, 9.2], [2001, 8.8], [2002, 8.6], [2003, 8.9], [2004, 8.9], [2005, 8.8], [2006, 8.9], [2007, 8.5], [2008, 8.9], [2009, 9.3], [2010, 8.5], [2011, 8.7], [2012, 7.7], [2013, 8.1]]
128 | 	        }, {
129 | 	        	//type: 'bar',
130 | 	            name: 'Reallocation rate',
131 | 	            data: [[1982, 34.8], [1983, 39.2], [1984, 35.2], [1985, 35.6], [1986, 39.2], [1987, 37.0], [1988, 38.2], [1989, 35.0], [1990, 32.2], [1991, 34.8], [1992, 36.0], [1993, 33.0], [1994, 32.2], [1995, 28.8], [1996, 30.8], [1997, 34.2], [1998, 31.2], [1999, 33.8], [2000, 31.8], [2001, 33.0], [2002, 37.6], [2003, 32.6], [2004, 30.8], [2005, 29.0], [2006, 26.6], [2007, 30.6], [2008, 28.6], [2009, 27.4], [2010, 27.8], [2011, 25.4], [2012, 24.8], [2013, 24.8]]
132 | 	        }]
133 | 	    });
134 |   		// end  test 1
135 | 
136 |   		// start  test2
137 |     	$('#bar-chart').highcharts({
138 |     		accessibleSettings: {
139 |     			autoAccessible: false,
140 |     			desc: "Custom description",
141 |     			title: "Custom Title",
142 |                 csvLinkText: "Download chart data for historic world population."
143 |     		},
144 |     		credits: {
145 | 	            enabled: false
146 | 	        },
147 | 	         chart: {
148 |             type: 'bar'
149 |         },
150 |         title: {
151 |             text: 'Historic World Population by Region'
152 |         },
153 |         subtitle: {
154 |             text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
155 |         },
156 |         xAxis: {
157 |             categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
158 |             title: {
159 |                 text: null
160 |             }
161 |         },
162 |         yAxis: {
163 |             min: 0,
164 |             title: {
165 |                 text: 'Population (millions)',
166 |                 align: 'high'
167 |             },
168 |             labels: {
169 |                 overflow: 'justify'
170 |             }
171 |         },
172 |         tooltip: {
173 |             valueSuffix: ' millions'
174 |         },
175 |         plotOptions: {
176 |         	series: {
177 | 		        	animation: false
178 | 		    },
179 |             bar: {
180 |                 dataLabels: {
181 |                     enabled: true
182 |                 }
183 |             }
184 |         },
185 |         legend: {
186 |             layout: 'vertical',
187 |             align: 'right',
188 |             verticalAlign: 'top',
189 |             x: -40,
190 |             y: 80,
191 |             floating: true,
192 |             borderWidth: 1,
193 |             backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
194 |             shadow: true
195 |         },
196 |         credits: {
197 |             enabled: false
198 |         },
199 |         series: [{
200 |             name: 'Year 1800',
201 |             data: [107, 31, 635, 203, 2]
202 |         }, {
203 |             name: 'Year 1900',
204 |             data: [133, 156, 947, 408, 6]
205 |         }, {
206 |             name: 'Year 2012',
207 |             data: [1052, 954, 4250, 740, 38]
208 |         }]
209 | 	}); // end test 2
210 | 
211 |     // start  test3
212 |     	$('#column-chart').highcharts({
213 |     		accessibleSettings: {
214 |     			autoAccessible: true,
215 |     			desc:"",
216 |     			timeSeries: false,
217 |     			title: "",
218 |     			xUnitPrefix: "",
219 |     			xUnitSuffix: "",
220 |     			yUnitPrefix: "",
221 |     			yUnitSuffix: "",
222 |                 csvLinkText: "Download chart data for fruit consumption per person."
223 |     		},
224 |     		credits: {
225 | 	            enabled: false
226 | 	        },
227 | 	        chart: {
228 |             type: 'column'
229 |         },
230 |         title: {
231 |             text: 'Fruit Consumption Per Person'
232 |         },
233 |         xAxis: {
234 |             categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
235 |         },
236 |         yAxis: {
237 |             min: 0,
238 |             title: {
239 |                 text: 'Total fruit consumption'
240 |             },
241 |             stackLabels: {
242 |                 enabled: true,
243 |                 style: {
244 |                     fontWeight: 'bold',
245 |                     color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
246 |                 }
247 |             }
248 |         },
249 |         legend: {
250 |             align: 'right',
251 |             x: -30,
252 |             verticalAlign: 'top',
253 |             y: 25,
254 |             floating: true,
255 |             backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
256 |             borderColor: '#CCC',
257 |             borderWidth: 1,
258 |             shadow: false
259 |         },
260 |         tooltip: {
261 |             headerFormat: '<b>{point.x}</b><br/>',
262 |             pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
263 |         },
264 |         plotOptions: {
265 |         	series: {
266 |         		animation: false
267 |         	},
268 |             column: {
269 |                 stacking: 'normal',
270 |                 dataLabels: {
271 |                     enabled: true,
272 |                     color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
273 |                     style: {
274 |                         textShadow: '0 0 3px black'
275 |                     }
276 |                 }
277 |             }
278 |         },
279 |         series: [{
280 |             name: 'John',
281 |             data: [5, 3, 4, 7, 2]
282 |         }, {
283 |             name: 'Jane',
284 |             data: [2, 2, 3, 2, 1]
285 |         }, {
286 |             name: 'Joe',
287 |             data: [3, 4, 4, 2, 5]
288 |         }]
289 | 	}); // end test 3
290 | 
291 | 	// start  test 4
292 | 	$('#pie-chart').highcharts({
293 | 		accessibleSettings: {
294 | 			autoAccessible: true,
295 | 			desc:"",
296 | 			timeSeries: false,
297 | 			title: "",
298 | 			xUnitPrefix: "",
299 | 			xUnitSuffix: "",
300 | 			yUnitPrefix: "",
301 | 			yUnitSuffix: " market share",
302 |             csvLinkText: "Download chart data for browser market shares."
303 | 		},
304 |         chart: {
305 |             plotBackgroundColor: null,
306 |             plotBorderWidth: null,
307 |             plotShadow: false,
308 |             type: 'pie'
309 |         },
310 |         title: {
311 |             text: 'Browser market shares January, 2015 to May, 2015'
312 |         },
313 |         tooltip: {
314 |             pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
315 |         },
316 |         plotOptions: {
317 |         	series: {
318 |         		animation: false
319 |         	},
320 |             pie: {
321 |                 allowPointSelect: true,
322 |                 cursor: 'pointer',
323 |                 dataLabels: {
324 |                     enabled: false
325 |                 },
326 |                 showInLegend: true
327 |             }
328 |         },
329 |         series: [{
330 |             name: 'Brands',
331 |             colorByPoint: true,
332 |             data: [{
333 |                 name: 'Microsoft Internet Explorer',
334 |                 y: 56.33
335 |             }, {
336 |                 name: 'Chrome',
337 |                 y: 24.03,
338 |                 sliced: true,
339 |                 selected: true
340 |             }, {
341 |                 name: 'Firefox',
342 |                 y: 10.38
343 |             }, {
344 |                 name: 'Safari',
345 |                 y: 4.77
346 |             }, {
347 |                 name: 'Opera',
348 |                 y: 0.91
349 |             }, {
350 |                 name: 'Proprietary or Undetectable',
351 |                 y: 0.2
352 |             }]
353 |         }]
354 |     });
355 | 	// end  exhibit 4
356 | 
357 |     // start exhibit 5
358 |     $('#nominal-chart').highcharts({
359 |         accessibleSettings: {
360 |             autoAccessible: true,
361 |             timeSeries: false,
362 |             yUnitSuffix: "mm"
363 |         },
364 |         chart: {
365 |             type: 'line'
366 |         },
367 |         title: {
368 |             text: 'Monthly Average Rainfall'
369 |         },
370 |         subtitle: {
371 |             text: 'Source: WorldClimate.com'
372 |         },
373 |         xAxis: {
374 |             categories: [
375 |                 'group 1',
376 |                 'group 2',
377 |                 'group 3',
378 |                 'group 4',
379 |                 'group 5',
380 |                 'group 6',
381 |                 'group 7',
382 |                 'group 8',
383 |                 'group 9',
384 |                 'group 10',
385 |                 'group 11',
386 |                 'group 12'
387 |             ],
388 |             crosshair: true
389 |         },
390 |         yAxis: {
391 |             min: 0,
392 |             title: {
393 |                 text: 'GPA'
394 |             }
395 |         },
396 |         tooltip: {
397 |             headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
398 |             pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
399 |                 '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
400 |             footerFormat: '</table>',
401 |             shared: true,
402 |             useHTML: true
403 |         },
404 |         plotOptions: {
405 |             column: {
406 |                 pointPadding: 0.2,
407 |                 borderWidth: 0
408 |             },
409 |             series: {
410 |                 animation: false
411 |             }
412 |         },
413 |         series: [{
414 |             name: 'Bill',
415 |             data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
416 | 
417 |         }, {
418 |             name: 'Frank',
419 |             data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
420 | 
421 |         }, {
422 |             name: 'George',
423 |             data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
424 | 
425 |         }, {
426 |             name: 'Chet',
427 |             data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
428 | 
429 |         }]
430 |     });
431 |     // end exhibit 5
432 | 
433 |     }); //close jquery on ready    
434 | 
435 | 	</script>
436 | </body>
437 | </html>


--------------------------------------------------------------------------------