Support ARIA and accessibility options
Please add support for ARIA type=Image.
Option to create an HTML table that contains the data shown in chart. For example on your http://www.highcharts.com/demo/line-labels Line with label chart the table might be set up as follows:
tr th Month /th th Tokyo /th th London /th /tr
tr th scope=row January /th td 7 /td td 3.9 /td /tr
This would allow us to use the product on sites that require compliance with ADA Section 508.
Implemented in Highcharts 5, see http://www.highcharts.com/docs/chart-concepts/accessibility
Torstein - Will there be an initiative to support accessibility for all the charts and graph types?
The company I work for utilizes Hi-Charts for a wide variety of data visualizations. The charts and graphs are always flagged by our accessibility specialists, we constantly have to mark them out of scope, but with the number of our clients asking about web accessibility swiftly increasing our concern is growing. I agree with others support for Section 508 and WCAG 2.0 is critical, not just government agencies and institutions but all organizations.
could you please tell me how to implement section 508 ADA in highcharts using extjs4
Please take a look at http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/column-parsed/ . Does that table comply with the HTML table requirements?
508 support is critical for customers like who in turn have govt agencies/institutions as customers. You can also look at http://www.w3.org/TR/SVG-access/
For WCAG 2.0 support - (required by many government agencies)
*1. Keyboard control for all mouse interaction (critical)*
2. Option for button that is only exposed to screenreaders to render data as semantically structured table (instead of graph). table summary could use data structure and labels.
3. Desirable. With above, also lead with a summary table - e.g. max/min vals, average, 'current' val (if time series). Trend?
4. ARIA info. where relevant
5. data download link - at least exposed to screenreaders
It's a good start to have alt text on images, but because there are no relationships defined between the various elements and pieces of alt text, as there would be in a structured table, screen readers have no way of grouping names with numbers intelligently, so blind and partially sighted users are still none the wiser. You could either use tables or ARIA to achieve this. ARIA is a relatively new kid on the block, and isn't supported by older browsers or screen readers, so tables might be the way to go here, but ARIA would certainly be an acceptable second best.
Here is the link to support for ARIA that is used with the jQuery Visualize plugin: http://www.filamentgroup.com/lab/update_to_jquery_visualize_accessible_charts_with_html5_from_designing_with/
Add the following to the table and it would be 508 compliant:
- Add a summary attribute to the table tag
- Add a caption tag
- Add scope attribute to tr and td tags
Although, I don't think mbear was looking for a data table solution for 508 compliance even though I believe it is necessary.
The Filament Group's implementation called jQuery Visualize that creates graphs and charts from an html data table using HTML5 Canvas and is 508 compliant. It is accessible straight away because of their approach. https://github.com/filamentgroup/jQuery-Visualize
Can you specify a bit more? What would it take to make Highcharts 508 compliant? Also check out a table parsing example at http://www.highcharts.com/demo/column-parsed.