38: 可访问的 SVG

在本期视频中，我们将深入研究 Léonie Watson 的关于可访问 SVG 的文章，基本上逐点进行讲解。我喜欢的第一点是使用 SVG 本身就是一个好主意，因为它具有视觉清晰度。

她提供的最终示例代码是

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

我们甚至尝试使用 VoiceOver，并通过标签操作来测试它是否能正确读取内容。