付録C: アクセシビリティ対応

この付録は参考情報であり、規範的なものではありません。

C.1. SVGのアクセシビリティ機能

この付録ではSVGのアクセシビリティ機能や、SVGと関連するアクセシビリティ仕様を強調し、W3C Webコンテンツアクセシビリティガイドライン（WCAG）2.0 [WCAG2]の要件への対応について説明します。

[WCAG2] 情報や構造を失うことなく、様々な方法（例: シンプルなレイアウト）で提示できるコンテンツを作成する: 情報と関係性。

aria-labelledbyによるラベル関係のサポート。
aria-describedbyによる説明関係のサポート。
aria-ownsによる構造関係のサポート。
aria-controlsによる、ある要素が他の要素の内容や動作を制御する関係のサポート。
‘g’によるグループ化の定義。
WAI-ARIAのgroupおよびradiogroupロールのサポート。

[WCAG2] 時間依存メディア: 時間依存メディアに代替手段を提供する。

‘audio’ および‘video’ 要素は、HTMLの‘track’要素によって時間依存メディアへの代替手段を提供します。

[WCAG2] キーボード操作可能: すべての機能をキーボードから利用可能にする。

フォーカス対応と‘tabindex’属性による、HTMLと連動した順次フォーカス移動。
キーボードイベント属性とマウスイベント属性のサポートによるスクリプト作成者向け機能。
キーボードイベントによるスクリプト作成者向け機能。
DOM内の各SVG要素に対してフォーカスを設定するスクリプト対応。
DOM内の各SVG要素の‘tabindex’属性を取得するスクリプト対応。
Documentインターフェース内のHTMLのactiveElementプロパティのスクリプト対応。

[WCAG2] ナビゲーション可能: ユーザーがナビゲートし、コンテンツを見つけ、自身の位置を把握できる方法の提供。

SVGは、WAI-ARIAlandmarkロールによるコンテンツブロックのスキップを可能にします。
‘title’によるページタイトルの提供。
‘tabindex’による順次フォーカス順序の指定。
‘a’ 要素により、リンクの目的を内容から明示できます。
headingロールとaria-level、aria-labelledby、aria-labelの利用による見出しやラベルのサポート。
フォーカス順でフォーカスされた要素に対して視覚的なフォーカスを表示することで、見えるフォーカスをサポートします。

[WCAG2] 読みやすさ: テキストコンテンツの可読性と理解性の確保。

‘lang’属性により、ページ全体や一部の言語指定に対応します。

[WCAG2] 互換性: 現行標準および将来のユーザーエージェントや支援技術との互換性の最大化。

WAI-ARIA属性や‘title’要素を使った、名前・役割・値の対応。

WAI-ARIA対応とテキスト代替

C.2. SVGアクセシビリティ仕様とガイドラインの対応

このセクションでは、SVGのアクセシビリティ関連仕様や執筆ガイドラインを列挙します。

ユーザーエージェント向けSVGアクセシビリティ関連仕様

SVGアクセシビリティAPIマッピング[SVG-AAM]仕様。
Core Accessibility API Mappings 1.1 [CORE-AAM]仕様。
アクセシブルな名前と説明: 1.1 [ACCNAME-AAM]仕様。

コンテンツ作成者向け関連仕様