SVG 'シンボル'をアクセシブルにする

Question

<title>と<desc>をアクセシビリティの要素と組み合わせることを明確にしたいと考えています。次は有効な実装ですか？

<svg> 
    <title>This is an SVG</title> 
    <desc">Lorem ipsum descriptum...</desc> 
    <use xlink:href="#symbolID"></use> 
</svg> 

または<symbol>のような要素に置きますか？

<symbol id="symbolID"> 
    <title>This is an svg</title> 
    <desc>Lorem ipsum ...</desc> 
    <path d="......"/> 
</symbol> 

スクリーンリーダーがこれらを選択できるかどうかを確認しますか？

Answer 1

role="img"を追加すると、スクリーンリーダーがそれを受け取ることができます。スクリーンリーダー、ブラウザ、および各バージョンに応じて、<title>と<desc>の両方を発表することがあります。

もう少し互換性を持たせるために、aria-labelledbyを追加して、明示的にアクセシブルな名前を探す場所をスクリーンリーダーに伝えることができます（<desc>を知らせることもできません）。いくつかのコンボは、<title>も結果として2回読み取ることができるので、あなたは簡単に行動します。

<a href="#"> foo 
    <svg role="img" aria-labelledby="twitterTitle"> 
    <title id="twitterTitle">Twitter Account</title> 
    <desc>Twitter account for example</desc> 
    <use xlink:href="#twitter"/> 
    </svg> 
</a> 

I forked your CodePen and marked it up。

あなたは既にこれら二つの記事を見て、そうでない場合した可能性があります。

SitePointで

• Tips for Creating Accessible SVGレオニー・ワトソン、ヘザーMigliorisiによってCSS-トリックで
• Accessible SVGsで。