コンテンツにスキップ

アクセシブル出版ナレッジベース

カテゴリー: 固定レイアウト

SVG(スケーラブル ベクター グラフィックス)

概要

固定レイアウトの出版物は、SVGを使用してテキストと画像を組み合わせて作成できます。各画像には固定の高さと幅が割り当てられ、コンテンツはこのキャンバス領域内に配置されます。

固定レイアウトにSVGを使用する利点は、SVGでは他の画像形式と違ってテキストコンテンツを画像データとして書き込むのではなく(訳注:テキスト情報のまま)埋め込める点です。このようにマークアップされたテキストは支援技術で読み取れます。SVGでは、画像の代替テキストや拡張説明を組み込む方法も提供されています。

弱視の読者にとっては、画像の拡大の際に、ピクセル画素化されて見にくくなることなく、画像の大きさの変更ができる(スケーラブル)というのも、SVG画像の利点です。

EPUB

SVGは固定レイアウトコンテンツに最適ですが、WebブラウザーはSVGを出版物の一部としてレンダリングするように最適化されていません。たとえば、サイズや向きの制御は制限されます。

出版におけるこの問題を解決するために、EPUB 3では、リーディングシステムが各固定レイアウトページに適切な表示領域と特性を作成できるように支援するメタデータが導入されました。

EPUB出版物は、固定レイアウトのSVGページで完全に構成することも、リフロー型の出版物内にいくつかの固定レイアウトページを散在させることもできます。

SVGの固定レイアウトページや、XHTMLの固定レイアウトページを混在させたり、また、画像を直接EPUBの読み取り順序に並べた固定レイアウトを混在させたりもできます。

注記

固定レイアウトの出版物の、作成方法の詳細については、固定レイアウトの概要ページをご覧ください。

アクセシビリティ

リフロー型の出版物をアクセシビリティ対応にするのと同じ手法が、アクセシビリティを最大限に高めた固定レイアウトのSVGページの作成にも使用できます。主な手法には次のようなものがあります。

  • 論理的な読み順の確保 — SVG内のテキストコンテンツの順序は、ユーザーのページ上での論理的な読み順序と一致していなければなりません。
  • 画像とコンポーネントの説明 — SVGのtitledesc要素を使用して、ページ全体とドキュメント内の画像コンポーネントの両方を説明します。
  • テキストを画像にしない — テキストコンテンツはSVGに組み込んでスタイル設定できます。画像にしてはいけません。
  • テキストのコントラストの確保 — SVGのテキストコンポーネントが背景と視覚的に区別できるのが重要です。

SVGをスケーラブルでない画像形式(JPEG、GIF、PNG など)のラッパーとしてのみ使用する場合、スケーラブルである利点は失われます。これらの画像形式がスケーラブルでない点はSVGでは改善されません。スケーラブルでない画像形式を使うならば、画像を記述する方法がより多く提供されているHTMLラッパーの方が適しているでしょう。

SVGが有するアクセシビリティ機能にもかかわらず、SVGコンテンツは画像ベースという制約により、完全にアクセシブルなSVGページは作成できないことがあります。EPUB3リーディングシステムでは固定レイアウト出版物の外観を変更する際に制限があるため、読みやすさも損なわれます。

適用対象

EPUB 3 EPUB 2 Audiobooks
はい いいえ いいえ

トップに戻る↑