Web Accessibility - Ensure alternative text is informative for image links (SVG Images)

Question

I'm trying to make an image link web accessible, but the image is SVG. It must be compliant with the AMP tool (found here: https://www.webaccessibility.com/express.php ). The specific issue that is being thrown can be found here:

https://www.webaccessibility.com/best_practices.php?best_practice_id=370

This code snippet will pass the AMP tool perfectly..

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

However, when it comes to wrapping that in an A tag, AMP throws an error. Here's an example of what seemingly SHOULD be 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>

..but unfortunately, that last code snippet throws an error. Can someone help me? Thanks in advance.

Answer 1

My solution wasn't fun, but it did the trick. You can simply take the SVG tag and all it's content out of the A tag, and then use CSS to position it where it belongs, and it will pass the tool.. I wish there was a better way but I haven't found one. If you do know something I don't, please share it, it will be much welcomed. Thanks!

Final result that works:

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