Datavizable

Describler is an experimental prototype screen reader (audio browser for blind people) for SVG, and specifically SVG data visualizations.

How do I use the Describler screen reader?

1. Load a file from the "Select a file" dropdown (I suggest loading the first file, aria-bar-chart.svg).
2. Navigate to and through the dataviz by pressing the tab or arrow keys
   • next item: tab or → (right arrow)
   • previous item: shift+tab or ← (left arrow)
3. For each item, a number of options for more information will be listed. Press the appropriate number key (1–9) for each option.

To understand how Describler preserves context and lets the user truly explore the data visualization, try closing your eyes (if you're sighted), and moving back and forth through the datapoints.

Alternately, you can use the controls on the left sidebar to navigate and choose options.

What is SVG?

SVG stands for Scalable Vector Graphics, and it is a vector-based format, that can be created in popular drawing tools like Inkscape and Adobe Illustrator. Because each shape is made up of one or more markup elements, and the document has a DOM like HTML, it can be styled with CSS, and made interactive or animated with JavaScript.

Like HTML, the text in SVG is simply text, and so screenreaders can read it. In addition to the visible text elements, like <text>, <tspan>, and <textPath> elements, SVG has special metadata elements, <title> and <desc>, which allow you to annotate your shapes for mouseover tooltips and special screenreader descriptions.

What is sonfication?

Sonfication is a technique to represent signals or data patterns through sound. The most popular example is a Geiger counter.

Describler has an experimental sonifier help the user understand the trend of the data visualization, by playing a tone that rises or falls the animated cursor runs along the trend line. You can activate this by pressing the s key to create the trend line, then the p key to "play" the tone.

How do I make accessible SVGs?

Coming soon…

Notes

Describler is meant to add accessibility to SVG images, not to interactive SVG applications or GUIs; use ARIA markup for that.

For more background on accessible SVG, see my blog post. Suggestions or code improvements are welcome! See the source on github, where you can also check out some sample SVG files to play with.

Thanks!
–Shepazu