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?
- Load a file from the "Select a file" dropdown (I suggest loading the first file, aria-bar-chart.svg).
- Navigate to and through the dataviz by pressing the
tabor arrow keys
- next item:
- previous item:
- next item:
- For each item, a number of options for more information will be listed. Press the appropriate number key (
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?
Like HTML, the text in SVG is simply text, and so screenreaders can read it. In addition to the visible text elements, like
<textPath> elements, SVG has special metadata elements,
<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?
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.