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

【问题标题】：Web Accessibility - Ensure alternative text is informative for image links (SVG Images)Web 可访问性 - 确保替代文本为图像链接（SVG 图像）提供信息
【发布时间】：2016-10-07 20:20:03
【问题描述】：

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

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

这段代码sn-p将完美通过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>

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

【问题讨论】：

标签： image svg alt

【解决方案1】：

我的解决方案并不有趣，但它成功了。您可以简单地将 SVG 标记及其所有内容从 A 标记中取出，然后使用 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>

【讨论】：