Last year, I put together a talk called “Invisible Visualization” on making accessible data visualizations. Several people have asked me about it, so I thought I’d write a post about it.

By “accessible”, I mean able to be consumed and understood by people with a variety of sensory needs, including people with visual limitations, cognitive impairments, mobility challenges, and other considerations. I provided a few simple ways to expose the data in SVG images, but mostly I described different constraints and suggested ways of thinking about the problems.

I didn’t want to lecture people about the need for making their content accessible; I wanted to excite them about the possibilities of doing so. It’s great that there are legal regulations addressing the needs of people with disabilities (like the “Section 508” laws here in the US), but that’s not going to empower and motivate developers and designers to want to meet these kinds of design constraints and solve these kinds of technical challenges. I sought to avoid the “threat and guilt” trap that I’ve seen too many accessibility talks fall into.

I originally created the talk for the amazing OpenVis Conf 2013 in Boston, put on by Bocoup. It was a little rough, but it was received well. You can watch the video of that presentation if you’d like to see it.

The audience was data visualization folks, so it was a novel take on the topic for many of them.

I was asked to repeat the presentation at John Foliot’s Open Web Camp 2013, which had more accessibility experts in the crowd; I was nervous about that, since I’m far from an accessibility expert, but it was also got good reviews there.

In September of 2013, I gave an impromptu version of the talk at a local conference, NCDevCon, which led to a lot of really great discussions.

Encouraged by others, I submitted the talk to Fluent 2014 and CSUN 2014, and was accepted at both.

The turnout for my talk at Fluent 2014 was pretty low, since I faced a lot of good competition; those who attended my talk had really nice things to say about it, though. Truth to tell, however, I was disappointed in my presentation that day; I didn’t feel well, and I didn’t perform nearly as well as before, and failed to mention a few things I’d wanted to say. I only had 30 minutes, so I did feel a bit rushed. But several people said they got something out of it, so that was gratifying.

I was more intimidated by CSUN 2014, which is the largest and most respected accessibility conference. This was a type of audience I haven’t presented to before: almost exclusively hard-core accessibility professionals and people with accessibility needs themselves. I had a full hour, but I needed it; I had to change the way I was presenting my slide material, which is highly visual, to make sure that my blind audience members could experience it as well. My W3C colleague Mark Sadecki helped me a lot with this simple piece of advice: if there’s something on the screen, describe it; even if a blind listener doesn’t need to know that it’s the information is bar chart or a picture of a manatee to get the gist, they will want to be able to talk about it with other audience members later, so err on the side of being descriptive, and give them the full experience. But I nailed it! I had a very receptive audience, and I hit just the right notes at just the right time. I was even thanked by blind audience members for my slide descriptions. Sometimes things just go right; I only wish they’d recorded this particular presentation. I also learned quite a lot at CSUN from other people doing amazing and inspirational work in accessibility.

Each time I gave the talk, I refined it a bit more, adding slides, tightening it up, and generally improving it. You can see my Invisible Visualization slides on the W3C site… but beware, the have a couple quirks:

1. The “slide deck” is just a set of individual SVG files strung together with a common script file, and each one is a little webapp in itself, some with more interactivity than simple bullet points; you navigate them by using the arrow keys, with down key for next bullet point, and left and right keys for changing the slides;
2. They don’t have a lot of text, so they aren’t really self-explanatory; to get the full impact, you should watch a video of one of my presentations; I’ll try to find time to make an updated video of my presentation, to give it better context.

One of my more popular slides is a demo on the sonfication of a line-chart; sonfication is the representation of information with sound, rather than visually. To make this demo, I just took an SVG line chart (using a <polyline> element), and ran a “cursor” line across it (using the arrow keys); I found the intersection of the 2 lines, calculated the y-position of the intersection, then set that as the frequency of an oscillator node using the Web Audio API. (It’s no coincidence that I happen to be the W3C staff contact for the Audio Working Group, and a long-time participant of the SVG Working Group.) At Open Web Camp, I had the fortune to meet Gerardo Capiel of Benetech, which runs the DIAGRAM Center; I collaborated with Gerardo to refine my sonification demo, and we adapted it to make a Web-based prototype of the MathTrax, a graphing calculator for blind people. If you want to help me refine it further, you can check out my sonifier code on GitHub. I have a lot of improvements to make, but hopefully I can find time in the next few months.

If you are interested in the topic of accessible SVG, you can join the W3C Accessible SVG Community Group. We haven’t been very active up to now, but in June–July 2014, I’m carving out some time to focus on making and running basic SVG accessibility tests to establish the current state of support for SVG in screenreaders and other Accessibility Technology, and if you’re a person who writes tests or who uses a screenreader, you are most welcome to help out. This is the fundamental work that needs to get done in order to move us forward toward a more accessible graphical Web.