Web 可访问性 - 确保替代文本为图像链接（SVG 图像）提供信息

Question

我正在尝试使图像 link 可通过网络访问，但图像是 SVG。它必须符合 AMP 工具（可在此处找到：https://www.webaccessibility.com/express.php）。抛出的具体问题可以在这里找到：

https://www.webaccessibility.com/best_practices.php?best_practice_id=370

此代码段将完美通过 AMP 工具..

 <svg role="img" class="icon icon-large">
 <title>Build a Long-Term Plan</title>
 <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-calendar"></use>
 </svg>

但是，在将其包装在 A 标记中时，AMP 会抛出错误。这是一个看似应该没问题的例子：

<a href="/some-url-here/" class="some-class">
 <svg role="img" class="icon icon-large">
 <title>Build a Long-Term Plan</title>
 <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-calendar"></use>
 </svg>
 <span>Build a Long-Term Plan</span>
</a>

..但不幸的是，最后一个代码片段会引发错误。有人能帮我吗？提前致谢。

Answer 1

我的解决方案并不有趣，但它起到了作用。您可以简单地从 A 标签中取出 SVG 标签及其所有内容，然后使用 CSS 将其定位在它所属的位置，它就会通过该工具。我希望有更好的方法，但我还没有找到一个。如果你确实知道一些我不知道的事情，请分享，这将非常受欢迎。谢谢！

最终有效结果：

<svg role="img" class="icon icon-large">
<title>Build a Long-Term Plan</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-calendar"></use>
</svg>
<a href="/some-url-here/" class="some-class">
 <span>Build a Long-Term Plan</span>
</a>

Web 可访问性 - 确保替代文本为图像链接（SVG 图像）提供信息

Web Accessibility - Ensure alternative text is informative for image links (SVG Images)

svg

image

alt