Describler allows 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.
Describler 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?
- Upload your SVG file. Click on the orange button with the up-arrow icon, and select an SVG file.
- Add or edit the text, titles, and descriptions. Click on any text in the list view, and edit it. Hit
Enteror 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. - 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.
- 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