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>