Web辅助功能 - 确保替代文本为图像链接提供信息(SVG图像)

Question

我正在尝试使图像链接可以访问,但图像是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

我的解决方案并不有趣，但它起到了作用。您可以简单地将 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>