38: Zugängliches SVG

In diesem Screencast tauchen wir in Léonie Watsons Artikel über zugängliches SVG ein und gehen ihn im Wesentlichen Punkt für Punkt durch. Ich finde es gut, dass der erste Punkt ist, dass die Verwendung von SVG an sich eine gute Idee ist, wegen der visuellen Klarheit.

Der fertige Beispielcode, den sie bereitstellt, ist

<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>

Wir versuchen sogar, VoiceOver zu verwenden und spielen mit dem Tabulatortasten, um es die richtigen Dinge lesen zu lassen.