Describler

Upload an SVG file…
Download…

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

How do I use the Describler screen reader?

First, load an SVG image. You can find some sample SVG images on this site.

Next, tab to the chart. For each focusable item, you will hear a spoken description. Note that this uses the Web Speech API, which is not yet supported by all browsers. Note also that you should be a bit patient; it might take a second or so before the description is read aloud.

Once the description has been read out, you can press the d key to hear more details about that part of the chart. For some items, such as datapoints, there are multiple levels of details, which you can activate by subsequent presses of the d key.

Describler also 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 also has an online editing tool that helps you to make your SVG images accessible and reusable. It shows you all of the text content of your SVG in an editable list, including both visible text and metadata, and makes it easy for you to add descriptive content, or change the text that's already there. And you can use the “audio preview” feature to hear how your SVG sounds in common screenreaders. The Describler editor also makes your SVG auto-scaling by default, rather than a fixed size; this allows you to use your SVG at whatever size you need, or to change the size dynamically, and it allows users to zoom and pan easily.

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.

How do I use Describler to make my SVG accessible?

  1. Upload your SVG file. Click on the orange button with the up-arrow icon, and select an SVG file.
  2. Add or edit the text, titles, and descriptions. Click on any text in the list view, and edit it. Hit Enter or click off the text to commit your change to the SVG image. To add a title or description to any element, click one of the purple buttons next to that list item. Remember: titles should be short, and descriptions should be longer; don’t duplicate text… write your descriptions just the way you yourself would like to hear the image described.
  3. Listen to the SVG image! Click on the green button with the speaker icon to hear your SVG spoken aloud like a person using a screenreader will hear it. This is an experimental feature in browsers, so you’ll have to enable it in your browser to use this feature.
  4. Save your SVG file. Click on the purple button with the down-arrow icon to save your SVG file locally.

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