38: Accessible SVG

Avatar of Chris Coyier
Chris Coyier on

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>


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