Web Erişilebilirliği - Alternatif yazıların görüntü bağlantıları için bilgilendiricidir (SVG Images)

Question

Resim bağlantısı web erişilebilir hale getirmeye çalışıyorum, ancak görüntü SVG. AMP aracıyla uyumlu olmalıdır (burada bulunan: https://www.webaccessibility.com/express.php). atılıyor belirli konu burada bulunabilir:

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

Bu kod parçacığı mükemmel AMP aracını geçecek ..

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

Ancak, bir A o biraraya geldiğinde, etiketi, AMP bir hata atar. İşte görünüşte Tamam GEREKEN ne bir örnek:

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

..ama ne yazık ki, son kod parçacığı bir hata atar. Birisi bana yardım edebilir mi? Şimdiden teşekkürler.

Answer 1

Çözümüm eğlenceli değildi, ama hile yaptı. SVG etiketini ve tüm içeriğini A etiketinden alabilir ve daha sonra CSS'yi ait olduğu yere yerleştirmek için kullanabilir ve aracı geçecektir. Keşke daha iyi bir yol olsaydı ama bir tane bulamadım. . Bir şey bilmiyorsanız, lütfen paylaşın, çok hoş karşılanacak. Teşekkürler!

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

: çalışır

Final sonuç