要約

視覚コンテンツ、テキスト、スクリプトのWCAGテクニックに従って、SVGをアクセシブルにします。

テクニック

SVGでサポートされているアクセシビリティ機能の詳細なリストについては、 SVG 2.0の付録Dを参照してください。

例

例1 — デフォルトの言語指定
<svg xmlns="http://www.w3.org/2000/svg" xml:lang="en" lang="en">
   …
</svg>
例2 — 言語指定の上書き
<svg xmlns="http://www.w3.org/2000/svg" xml:lang="en" lang="en">
   …
   <text … >I think therefore I am...</text>
   <text … xml:lang="fr" lang="fr">Je pense donc je suis...</text>
   <text … xml:lang="it" lang="it">Penso dunque sono...</text>
   …
</svg>
例3 — SVGにタイトルと説明文を付ける
<svg
	 xmlns="http://www.w3.org/2000/svg"
	 xml:lang="en" lang="en">
   <title>The New EPUB Logo</title>
   <desc>
	  The EPUB logo is a lower-case letter E that has 
	  been tilted 45 degrees to counter-clockwise so 
	  that it appears to be sitting in balance on its 
	  lower-left corner. The E is drawn as a single, 
	  unclosed line of green starting at the centre 
	  of the image, moving to the outer edge and then 
	  continuing around in a box-like pattern. The
	  external corners have all been rounded.
   </desc>
   …
</svg>
例4 — 装飾的なSVG
<svg
     xmlns="http://www.w3.org/2000/svg"
     xml:lang="en" lang="en"
     role="presentation">
   …
</svg>
例5 — リンクにタイトルを追加する
<a href="http://www.ontario.ca">
   <title>Ontario government web site</title>
   <g …>
      …
   </g>
</a>

よくある質問

HTMLにSVGを埋め込むにはどのような方法が最適ですか？

SVGマークアップをHTMLドキュメントに直接埋め込む方法が最善であり、SVGのDOMが支援技術から参照できるようになります。埋め込みが機能するケースは多くないので、次に最適な方法はobject要素を使用する方法です。一部のブラウザーと支援技術の組み合わせでは、このアプローチには問題（DOMが公開されないなど）があることが報告されていますが、一般的にはこれはアクセシブルであり、object要素内にフォールバックを提供できます。

iframe要素の方が良い選択のように思えるかもしれませんが、この要素には、ユーザーエージェントがSVGをサポートしていない場合に、フォールバックを提供するための効果的な方法がないという欠点があります。

imgタグは、ユーザーが操作する必要がなく動的コンポーネント（スクリプトやアニメーション）を持たないSVGに限って使用してください。

説明

言語

支援技術がコンテンツを適切にレンダリングできるように、SVG画像内に含まれるテキストコンテンツには、常に言語を設定してください。

xml:lang属性は、SVG画像のルート要素であるsvg要素に付与されている場合に、画像内のテキストコンテンツのデフォルト言語を識別します。SVGがXMLパーサーによって解釈されない場合は、 lang属性も指定する必要があります。

画像内の個々のコンポーネントとテキスト要素にはxml:lang属性とlang属性を付与でき、デフォルト言語とは異なる言語のテキストを組み込めます。

タイトルと説明

支援技術のユーザーをサポートするために、出版物にとって重要なSVG画像には、常にタイトル（title）と説明（desc）を埋め込む必要があります。

提供される説明は、画像に含まれる情報に見合ったものでなければなりません。単純な画像にはaltのような説明を、複雑な画像にはより長い説明を使用します。

SVG画像を純粋に装飾目的で用いる場合は、タイトルや説明を付けないでください。このSVG要素に、ARIA role属性を付けて装飾用であると示してください。

SVG画像内のすべての重要なグラフィックコンポーネントには、画像全体のアクセシビリティを向上させるために、独自のタイトルや説明を付ける必要があります。

テキスト要素

画像にテキストコンテンツを組み込む場合は、支援技術から文章を利用できるようにtext要素を使用します。テキストの外観を歪めたり変更したりする場合にも、text要素を使うと、その変更を解読できない人にも文章を利用できるようになります。

コンポーネントのtitleがSVGにテキストとして含まれている場合は、新しいtextノードを作成する代わりに、 tref要素を使用して文章を参照できます。

リンク

SVGグラフィックコンポーネントは、 a要素でラップすることでリンクを付けることができます。リンクが付けられた要素には、参照されるリンク先リソースの特徴がわかるように、常にtitle要素を付けるようにしてください。

また、画像を拡大したり、どのコンポーネントがリンクされているかを下線や枠線などで確認できないユーザーのためには、特定のグラフィックコンポーネントがリンク可能で、他のコンポーネントがリンク不可能であることを明確に示す必要があります。

ARIA

aria-*属性はSVG要素につけることができます。役割（roles）、プロパティ（prooperties）、状態（states）を適切に設定し維持することで、すべてのユーザーが動的コンテンツ（カスタムコントロールとして使用されるSVG画像など）を操作できるようになります。

同様に、テキストに相当するグラフィックコンポーネントは、コンポーネントの現在の状態を反映するように更新してください。

SVG画像にスクリプトを記述する際には、デバイスに依存しないイベントを使用してください。すべてのユーザーが同じ方法で画像を操作するとは限りません。

ARIAランドマークロールを使用することで、複雑な画像のナビゲーションを簡素化できます。

関連リンク