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> 

，當涉及到包裝，在一個答：被拋出的具體問題可以在這裏找到標記，AMP引發錯誤。這是一個什麼樣貌似應該是OK的例子：

<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>