Chart Accessibility

Well, I managed to answer my own question and got it working just fine. Is this something that could be baked into the next release? It did require editing the easychart.module file. Thanks!

Sure thing. Let me find it and make it look nice.

So, I'm kind of new to the Drupal Community and posting fixes. Please bear with me. All the changes below were to easychart.module. I also added the export-csv file to the Highcharts library.

Line 303

+ 'js/modules/export-csv.js'

Line 416 - 420

-$inline_js = ' document.addEventListener("DOMContentLoaded", function () {
-var container = document.getElementById(\'easychart-chart-' . $chart_count . '\');
-window.easychart = new ec({element: container});';
-$inline_js .= '  window.easychart.setConfig(' . $item['config'] . ');';
-$inline_js .= '  window.easychart.setData(' . $csv . ');';

Line 416

+$inline_js = ' document.addEventListener("DOMContentLoaded", function () {
+var container = document.getElementById(\'easychart-chart-' . $chart_count . '\');
+Highcharts.Chart.prototype.callbacks.push(function (chart) {
+var div = document.createElement(\'div\'),
+ariaTable;
+chart.container.parentNode.appendChild(div);
+div.innerHTML = chart.getTable();
+ariaTable = div.getElementsByTagName(\'table\');
+chart.renderTo.setAttribute(\'aria-label\', \'A chart. \' + chart.options.title.text + \'. \' + chart.options.subtitle.text);
+chart.container.setAttribute(\'aria-hidden\', true);
+div.setAttribute(\'aria-label\', \'A tabular view of the data in the chart.\');
+div.setAttribute(\'class\', \'chart-table\');
+div.style.position = \'absolute\';
+div.style.left = \'-9999em\';
+div.style.width = \'1px\';
+div.style.height = \'1px\';
+div.style.overflow = \'hidden\';   
+});
+window.easychart = new ec({element: container});';
+$inline_js .= '  window.easychart.setConfig(' . $item['config'] . ');';
+$inline_js .= '  window.easychart.setData(' . $csv . ');';

Hope this makes sense.

This is what I used as a reference.

http://www.highcharts.com/docs/chart-concepts/accessibility

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/studies/accessible/

Thanks for the response. To me it seems like this should be an option on the chart's config page thereby allowing it to be turned on for all, some or none of the charts. It's kind of disconcerting to hear that this will not be added at all when accessibility should be at the front of every website. My focus is government websites and I handle quite a few. All use the Easychart module and library. Accessibility is a requirement, not wish-list item. Quite honestly, any US website that is not accessible is subject to a discrimination lawsuit. Even Highcharts makes mention of this in the Standards Compliance here, http://www.highcharts.com/docs/chart-concepts/accessibility.

That being said, I do realize that it's not your role to follow accessibility guidelines. It would just be nice not to have to make so many manual changes when a new library version is available.

Thanks again for the great module!

Cool. Thanks. I'd love to help if I am able.

Thanks, wesscoastin. I'm still going my old route just to make it easier for content editors. This way they only have to maintain the chart. I will keep your solution in mind.