웹 접근성 - 대체 텍스트가 이미지 링크 (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> 

을하지만, 그것은하는 A에 있음을 포장에 관해서 태그에서 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> 

을 : 작동

최종 결과