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>

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

1 个答案: