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.
