Web辅助功能-确保备用文本可用于图像链接（SVG图像）

Question

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