Question

我正在寻找关于将<title>和<desc>与辅助功能的元素相结合的说明。以下是有效的实施吗？

<svg>
  <title>This is an SVG</title>
  <desc">Lorem ipsum descriptum...</desc>
  <use xlink:href="#symbolID"></use>
</svg>

或者你会把它放在这样的<symbol>元素中吗？

<symbol id="symbolID">
  <title>This is an svg</title>
  <desc>Lorem ipsum ...</desc>
  <path d="......"/>
</symbol>

屏幕阅读器能够选择这些吗？

Answer 1

添加role="img"，屏幕阅读器可以选择它。它可能会宣布<title>和<desc>，具体取决于屏幕阅读器，浏览器和每个版本。

为了获得额外的兼容性，您可以添加aria-labelledby告诉屏幕阅读器在哪里查找显式可访问名称（这也意味着它可能不会宣布<desc>）。一些组合也可能会两次读取<title>，所以你应该简短一点。

<a href="#"> foo
  <svg role="img" aria-labelledby="twitterTitle">
    <title id="twitterTitle">Twitter Account</title>
    <desc>Twitter account for example</desc>
    <use xlink:href="#twitter"/>
  </svg>
</a>

I forked your CodePen and marked it up

您可能已经看过这两篇文章，但如果没有：

Tips for Creating Accessible SVG在SitePointbyLéonieWatson，
Accessible SVGs来自Heather Migliorisi的CSS-Tricks。

使SVG'符号'可访问

1 个答案: