In this screencast we dig into Léonie Watson's article all about accessible SVG and essentially go through it point by point. I enjoy that the first point is that using SVG at all is a good idea, because of the visual clarity.

The finished example code she provides is:

<svg version="1.1" width="300" height="200" aria-labelledby="title desc">

  <title id="title">Green rectangle</title>
  <desc id="desc">A light green rectangle with rounded corners and a dark green border.</desc>

  <a xlink:href="http://example.com" tabindex="0" role="link">
    <rect width="75" height="50" rx="20" ry="20" fill="#90ee90" stroke="#228b22" stroke-fill="1" />
    <text x="35" y="30" font-size="1em" text-anchor="middle" fill="#000000">Website</text>
  </a>

</svg>

We even attempt to use VoiceOver and play with tabbing around getting it to read the correct things.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag