Доступность в Интернете - убедитесь, что альтернативный текст является информативным для ссылок на изображения (изображения 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 выдает ошибку. Вот пример того, что, казалось бы, должно быть в порядке:

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