Wednesday, January 9th, 2008

Accessible Google Charts

Category: Accessibility, Google, JavaScript

Accessibility is something most developers consider an afterthought but not Chris Heilmann, web architect at Yahoo!. As a member of the Yahoo! Accessibility Stakeholders group he takes issues concerning accessibility very seriously and makes it a top consideration in everything he builds.

Chris Heilmann recently described his technique for making Google Charts more accessible for those who cannot see pie charts. His technique allows for standard accessible data tables to be converted to charts thus ensuring that visitors using screen readers can take advantage of the data while allowing users of traditional browsers to view the actual charts:

Using this script you can take a simple, valid and accessible data table…and it gets automatically converted to a pie chart.

Simply add the script to the end of the body and it’ll convert all tables with a class called “tochart”. You can define the size (widthxheight) and the colour as a hexadecimal triplet as shown in this example. If you leave size and colour out, the script will use presets you can alter as variables in the script itself.

To verify his code, Chris enlisted the help of a blind friend, also a member of the Yahoo! Accessibility Stakeholders group, who tested it with JAWS.

The script has also been enhanced to allow the creation of accessible data tables when pulling charts via the APIs verbose mode.

As always, it’s best to see it in action in order to truly appreciate it. I commend Chris and the Yahoo! Accessibility Stakeholders group for their efforts in making the web more accessible to all.

Posted by Rey Bango at 9:04 am

4.3 rating from 40 votes


Comments feed TrackBack URI

what a great post and Chris’s explanation is so crystal clear that even a grandma can understand it.

We will be using this technique later in our pm software, very excited.

Comment by Liming — January 9, 2008

I thought it was just an image at first, then he said, “Did you view source?” .. Ah-ha! Look at that. Well done. ;)

Comment by Schill — January 9, 2008

What’s so special about it? If we had the time, all applications would (or at least should) be built like this, or at least wherever it is possible. Unobtrusive javascript should take care of accessibility if properly applied. BTW whenever I asked a project manager if they wanted to make the current site accessible for screen readers or for people with color blindness the answer in 95% was no (we don’t want you to mess with things like that, those visitors don’t count, no time for that etc. :((

Comment by deadcabbit — January 10, 2008

Deadcabbit: you’re right, in a perfect world we should be building this into all applications anyway. In the real world, accessibility is a feature, and it is way down on the feature list, so it gets bumped into some indeterminate future for most classes of applications. Until we get tools that make it just as easy to build accessible apps as it is to build non-accessible apps, I’m afraid this isn’t going to change (much).

Comment by Joeri — January 10, 2008

@deadcabbit: I’ve built apps using standard approaches, as well as unobtrusive JS, and I’ve got to say that unobtrusive method usually ends up being alot easier to build and test in the end.

I think the reason is that when you build unobtrusively, you build a — fully functional — app using plain HTML and then add a JS behavior layer afterwards, with the key being that you have a fully working app to test before the JS is added.

I for one would like to see more charting libraries use tables as their
default datasource, not just something added on later.

Comment by dkubb — January 18, 2008

Excellent info thanks

Comment by Aphrodisiac — July 31, 2008

Leave a comment

You must be logged in to post a comment.