画像

概要

固定レイアウトの出版物では多くの場合、画像が不可欠です。固定レイアウトの出版物は、漫画のように完全に画像で構成されている場合もあれば、児童書のように物語の背景として画像が使用される場合もあります。

したがって、背景が認識できなかったり、画像を処理するのが難しい可能性のあるユーザーが、画像で伝えられる情報を利用できるようにすることが、固定レイアウトを可能な限りアクセシブルにするための優先事項です。

画像が出版物の内容理解に必要な情報を含んでいる場合は代替テキストや拡張説明を提供するという、すべての画像の基本的な要件は、固定レイアウトにも適用されます。たとえば、どのキャラクターが何を言っているかというコンテキストが、画像上の配置によってのみ伝わる場合、テキストデータが画像にオーバーレイされていれば読者は物語のセリフを追えるでしょう。

ページ上にはユーザーがアクセスする説明を配置できる追加の領域が無いので、画像を説明し、コンテキストを提供する方法をひねり出さなければならないのが、固定レイアウトにおける課題です。

SVG

SVGには、画像を説明するための二つの要素があります。

title — HTMLのalt属性に相当します。SVG画像全体とその中の個々のコンポーネントに代替テキストを提供するのに使用します。
desc — SVG画像全体とその中の個々のコンポーネントの拡張説明を提供するのに使用します。

出版物が固定レイアウトのSVGページで作成されている場合、これらの二つの要素を使ってコンテンツを説明できます。SVGはまだ十分にサポートされていないため、支援技術のサポートを改善するためにARIA属性（ roleおよびaria-describedby ）が追加されています。

<svg xmlns="http://www.w3.org/2000/svg" xml:lang="en" …
     <strong>role="group" aria-describedby="svgtitle svgdesc"</strong>>
   <title id="svgtitle">The Hydrologic Cycle</title>
   <desc id="svgdesc">The continuous cycle by which water …</desc>
   …
</svg>

注記

この画像にはユーザーが操作できる追加のテキストコンテンツ（非表示）が含まれているため、groupロールが画像に付与されています。画像が完全にグラフィカルである場合は、代わりにimgロールを使用します。

titleとdesc要素は、大きな画像のコンポーネントに注釈を付ける場合にも使用できます。

<g fill="lightgray" stroke="gray" role="img" aria-describedby="gtitle">
      <title id="gtitle">Rain clouds</title>
      …
</g>

これらの要素を使用してSVG画像に注釈を付けた場合の問題は、通常そのコンテンツが支援技術のユーザーに対してのみ利用可能になるという点です。

より高度なアプローチとしては、スクリプトやアニメーションを使用して説明を表示するリンクまたはボタンを設ける方法があります（例：ポップアウトのように説明を開く）。ただし、EPUB 3.2まではアニメーションなどが完全に制限されていたため、EPUBリーディングシステムのこのようなアプローチに対するサポートは制限されるかもしれません。

HTML

画像がHTML固定レイアウトページに埋め込まれている場合には、アクセシブルな説明を付与する方法がもっと沢山あります。SVG固定レイアウトの場合と同様に、説明を組み込むための画面スペースが限られているという制限が主たる考慮事項です。

そのため、説明は通常、さまざまなHTML、ARIA、CSSテクニックを使用して非表示にします。説明は、隠したり、クリッピングしたり、不透明度を設定したり、画像の下に重ねたりできます。非表示コンテンツに関するナレッジベースページでは、これらの可能性についてさらに詳しく説明しています。

EPUBのXHTMLコンテンツドキュメントでのスクリプトのサポートは、一般的にSVGで利用できるものよりはるかに優れているので、より幅広いユーザーが説明を表示するのに利用できる信頼性が高い方法があります。たとえば、画像をクリックまたはタップするとその説明を表示できます。Voyage of Life サンプルEPUBには、この手法の実験的な例が含まれています。

リフロー型の出版物とは異なり、固定レイアウトでページの背景画像を設定するのにCSSのbackground-imageプロパティが使用できます。ただし、この方法では、すべてのユーザーに対してアクセスできる説明を提供するのが難しいため（つまり、多くの場合、非表示の支援技術に対する説明のみを提供することになります）、この方法は、できるだけ純粋にプレゼンテーション用の背景に限定することをお勧めします。