ウェブアクセシビリティ - 画像リンク（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がエラーをスローします。ここで[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残念ながら、その最後のコードスニペットは、エラーがスローされます。誰か助けてくれますか？前もって感謝します。

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>