Internet accessibility - providing alternative text for image links (SVG images)

Question

I am trying to make an image webpage accessible, but an SVG image. It must be compatible with the AMP tool (here: https://www.webaccessibility.com/express.php ). The specific problem being thrown can be found here:

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

This piece of code perfectly conveys the AMP tool.

<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 the fact that in the A tag, AMP throws an error. Here is an example of what seems to 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, this last piece of code causes an error. Can anybody help me? Thanks in advance.

Answer 1

My decision was not funny, but it was a trick. You can simply take the SVG tag and all the content from the A tag, and then use CSS to position it where it belongs and it will go through the tool. I wish there was a better way, but I didn’t find it. If you know something that I don’t want, please share it, it will be very welcome. Thanks!

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