画像の説明（Image Descriptions）

要約

ユーザーが画像を通じて理解する必要がある情報は、テキスト形式でも提供します。

テクニック

画像が周囲のテキストで説明されていない場合は、 alt属性に代替テキストを指定します。[[WCAG-1.1.1]]
複雑な画像には拡張説明を提供します。[[WCAG-1.1.1]]

例

例－きわめてシンプルな画像（拡張説明は不要）

<img
    src="covers/9781449328030_lrg.jpg"
    alt="Accessible EPUB 3 - First Edition" />

例－ detailsによる拡張説明

次の例では、HTMLのdetails要素を使用して、デフォルト状態では折りたたまれて表示されない説明文を作成しています。aria-details属性は、画像と説明文を関連付けるために使用します。

<figure id="fig-01">
   <figcaption>
      The hydrologic cycle.
   </figcaption>
   <img
      src="graphics/water-cycle.jpg"
      aria-details="fig-01-desc"
      alt="The hydrologic cycle, showing the 
        circular nature of the process as water 
        evaporates from a body of water and 
        eventually returns to it"/>
</figure>
<details id="fig-01-desc">
   <summary>Description</summary>
   <p>
      The diagram shows the processes of 
      evaporation, condensation,
      evapotranspiration, water storage
      in ice and snow, and precipitation.
      A large body of water …
   </p>
</details>

例 - ハイパーリンクによる拡張説明

次の例では、単純なハイパーリンクを使用して、別のファイルの説明文にリンクします。

<figure id="fig-01">
   <img
      src="graphics/water-cycle.jpg"
      alt="The hydrologic cycle, showing the 
        circular nature of the process as water 
        evaporates from a body of water and 
        eventually returns to it"/>
   <figcaption>
     The hydrologic cycle. <a href="desc/fig-01.html">Description</a>
   </figcaption>
</figure>

例 — 非表示の説明

次の例では、 aria-describedBy属性を使用して非表示の説明文にリンクして、視覚的には説明文が利用できることをまったく判らなくしています。

特に非表示のコンテンツを参照する場合、EPUB では、この属性のサポートが不十分であることに注意してください。規格上有効であっても、ユーザーが説明文にアクセスできなくなる可能性があるため、注意して使うべきです。オープン Web プラットフォームは、支援技術を介してのみアクセスできる非表示コンテンツからは、脱却しつつあります。

説明文に表やリストなどの構造化マークアップが含まれている場合、すべてのタグ付けが削除され、テキストコンテンツのみがユーザーに読み上げられてしまうため、この手法は推奨されません。

<figure id="fig-01">
   <img
      src="graphics/water-cycle.jpg"
      alt="The hydrologic cycle, showing the 
        circular nature of the process as water 
        evaporates from a body of water and 
        eventually returns to it"
      aria-describedby="desc01"/>
   <figcaption>
     The hydrologic cycle.
     <aside id="desc01" hidden="hidden">
        <p>
           The diagram shows the processes of 
           evaporation, condensation,
           evapotranspiration, water storage
           in ice and snow, and precipitation.
           A large body of water …
        </p>
     </aside>
   </figcaption>
</figure>

例－ラベルとキャプションが反対側にある画像

次の例は、画像の上にラベル、下にキャプションがある図を示しています。 aria-labelledBy属性は、ラベルを図に関連付けるために使用され、この情報は引き続きユーザーに簡単に提示できます。

<figure id="fig-01" aria-labelledBy="fig1-label">
   <p class="label" id="fig1-label">Figure 1. Prime Mover</p>
   <img
      src="graphics/prime_mover.jpg"
      alt="The universe in motion through its attraction to the prime mover"/>
   <figcaption>
      <p>The primer mover is shown to be a —</p>
   </figcaption>
</figure>

よくある質問

なぜ目に見える説明文にリンクを張るのですか?

説明文が現在のページの目に見える部分にあったとしても、説明文にリンクすることで、支援技術のユーザーがページコンテンツを探し回ることなく、プログラムにより説明文にすばやくアクセスできるようにできます。

なぜlongdescはないのですか?

longdesc属性は現在、HTML の廃止された機能と見なされています。

W3C によって HTML の別の拡張機能として公開されていますが、EPUB ではサポートされていません。

なぜaria-detailsなのか?

aria-details属性は、目的がaria-describedby属性と似ていますが、文字列化されたコンテンツにはなりません（つまり、ユーザーは構造化された HTML として説明をナビゲートできます）。aria-details属性を使用すると、たとえば、ユーザーはdetails要素のコンテンツに移動できます。

figureタグはいつ必要ですか?

画像が出版物にとって重要であるものの、挿入時点では読み取る必要がない場合（つまり、論理的な読み取り順序の一部ではない場合）、 figureタグを使用して囲みます。詳細については、「フィギュア（図表）」ページを参照してください。

imgとpictureどちらを使用すればよいですか?

picture要素は、複数のバージョンの画像（異なる解像度や、異なるデバイスを対象とした異なる形式など）を提供する場合にのみ必要です。それ以外の場合、使用可能な画像形式が1つしかない場合は、picture要素にはimg要素を超えるアクセシビリティ面における利点はありません。どちらも代替テキストと拡張説明が利用できます。

説明文を書く

代替テキスト

出版物の理解に中心的な役割を果たす画像には、代替テキストをalt属性を用いて必ず付与しなければなりません。

注記

画像が純粋に装飾目的である場合、 alt属性は空のままにしておきます。詳細については、装飾画像のページを参照してください。

画像の代替テキスト表現は、画像の完全な説明になるようには設計されていません。コンテンツ製作者によくある間違いは、段落またはより長い画像の説明を提供するためにalt属性を使用することです。しかし、ユーザーは、代替テキストには画像のごく簡単な説明しか求めていません。読み続ける前にテキスト全体を聞かなければならないことが多いためです。代替テキストは、ユーザーの読書体験を妨げずに、ユーザーが拡張説明を読むかどうかを決定できるようにする必要があります。

画像の代替テキストの書き方について考える最も良い方法の 1 つは、視覚的に読む読者にとってなぜそのテキストが必要なのかを考えることです。目標は詳細情報を網羅することではありません。また、画像自体からは判断できない詳細情報（つまり、視覚的に読む読者がアクセスできない情報）を追加することでもありません。

短く簡潔な代替テキストを書くことは、それぞれの画像から必要とされる情報がまったく同じになることは決してないため、ある種の芸術です。しかし、画像に関する最も関連性の高い「誰が、何を、どこで、いつ、なぜ、どのように」という質問に、できるだけ少ない言葉で答えるようにすることは、役に立つテクニックです。

たとえば、この戦闘シーンを考えてみましょう。それぞれの質問をします。

この絵は何でしょうか？ウィリアム・サドラー2世によって描かれた絵画です。絵画には画家の名前が記されていないため、代替テキストによってこの情報を伝えるべきではありません。
絵に描かれているのは誰でしょうか？フランス軍とイギリス軍です。
彼らは何をしているのでしょうか？戦闘中です。
これはどこで起こっているのでしょうか？ワーテルローです。
これはいつ起きたのでしょうか？画像には記載されていないため、代替テキストによってこの情報を伝えるべきではありません。
彼らはなぜ戦っているのでしょうか？答えるには複雑すぎるし、絵画自体にも関係ありません。
彼らはどうやって戦っているのでしょうか？これも代替テキストには複雑すぎます。

最も関連性の高い回答を組み合わせると、「ワーテルローの戦いにおけるイギリス軍とフランス軍の絵画」という代替テキストが得られるでしょう。

ただし、絵のコンテキストも、絵の説明に重要な役割を果たします。たとえば、この絵画が英国の歴史に関する本に掲載されていた場合、ユーザーは戦いの参加者と日付をすでに知っている可能性があり、画家は関係ない可能性があります。この場合、代替テキストはさらに「ワーテルローの戦いの絵」に短縮できます。

一方、この絵画が反戦本で使われた場合、その代替テキストは「ワーテルローの戦いでの兵士の虐殺を描いた絵画」のように、戦闘の残虐性を強調することになるかもしれません。

代替テキストが出版物内の画像の目的を正確に伝えている限り、テキストを組み立てる方法は数多くあります。

拡張説明

画像の拡張説明を記述すると、代替テキストほど長さの制限がないため、混乱が少なくなる傾向があります。ただし、代替テキストと同様に、拡張説明を作成する際の目標は、画像の目的をできるだけ簡潔に説明することです。細部まですべてを説明するのではなく、重要な情報を伝えることです。

したがって、拡張説明を書くための最初のステップは、拡張説明が本当に必要かどうかを判断することです。特に周囲の文章でコンテキストがすでに提供されている場合、画像には説明がほとんど不要な場合があります。自分が書こうとしている説明文が、理解を助ける適切な情報を追加するものなのか、それとも詳細のための詳細説明なのか、自問してみてください。

たとえば、2 人の世界的なリーダーが笑顔で握手している画像を考えてみましょう。彼らの友好的な関係を示すためだけの画像であれば、だれが写真に写っていて、その人物が何をしているかを示す代替テキストで十分でしょう。彼らがいる部屋、着ている服、周囲にいる人々などについて長々と説明しても、読者の役には立ちません。

拡張説明が必要であることがわかったら、説明を書くプロセスは代替テキストを書くプロセスと同様になります。同じように「誰が、何を、どこで、いつ、なぜ、どのように」という質問を検討する必要がありますが、今回は重要な情報を完全に把握することが目標となります。

絵の文脈は、出版物にとってどのような情報が不可欠であるかを左右します。たとえば、代替テキストセクションの戦闘シーンを使用すると、軍事戦略に関する本では、攻撃の混乱を説明することに重点が置かれる可能性があります。絵に描かれた全員の行動を説明する必要はなく、戦闘の激しさを大まかに伝えるだけで十分です。

拡張説明では、画像の視覚的描写から判別できない事実を紹介しないでください。たとえば、将軍やその戦闘計画などを説明する場所ではありません。このような情報は、画像だけでは明らかではないため、周囲のテキストで説明されていないならば、画像のキャプションとして記述するべきです。

拡張説明を書くための追加のヘルプとして、DIAGRAM Centerのインタラクティブな例があり、ここには、さまざまな種類の画像を説明する方法が記載されています。

説明方法

次のセクションでは、画像に拡張説明を追加するための、より適切にサポートされているいくつかの方法について説明します。他の方法も可能ですが、リーディングシステムでのサポートは、ブラウザーほど堅牢ではないことがよくあります。テスト情報については、DIAGRAM Center の「EPUB で拡張説明を作成するためのベストプラクティス」を参照してください。

`details`要素

details要素を用いて、折りたたみ可能な画像の説明を記載できます。この要素の利点は、目の見える読者と見えない読者の両方が自分の判断で説明文にアクセスできることです (つまり、支援技術のユーザーがテキストを読み上げるかどうかを決定できるのと同じように、目の見える読者は説明を展開して読むかどうかを選択できます)。

ただし、この要素のサポートはEPUBではまだ一般的ではありません。要素テキストはデフォルトで常に開いている可能性があったり、また、最初は閉じていた場合には、要素を展開することでユーザーエージェントによって生成される要素によってページネーションで問題が生じる可能性があります（たとえば、要素を開くと、ページの下部にあるコンテンツが表示されなくなってしまうかもしれません）。

EPUB 出版物でこの要素を使用する場合、説明が図に関するものであるときは、この要素をfigureタグの終了直後に配置することを推奨します。この要素が、figure内に含まれていると機能しないことがよくあります。

以上のような欠点にもかかわらず、この要素は、現在EPUBでサポートされている最も信頼性の高い手法の1つです。

ハイパーリンク

説明へのリンクを提供する昔ながらの単純なハイパーリンクは、最も広くアクセシブルなもう一つの方法です。

<figure>
	<img src="crime-map.jpg" alt="Crime in Gotham City">
	<a href="crime-desc.xhtml">Description</a>
</figure>

ハイパーリンクは必ずしも別のドキュメントの説明文を参照する必要はないことに注意してください。説明文は、脚注のようにセクションの最後に記述されている場合があります。

EPUB では、可能であれば、リンクされた説明文は、説明文に到達する際の問題を回避するために、１つのファイルに１つの説明文にする必要があります（つまり、同じファイルに複数の説明がある場合、すべてのリーディングシステムが正しい位置に移動できるわけではありません）。ただし、画像が多数ある場合は、各説明を別のファイルに追加すると、spineが膨れ上がってしまう可能性があります（つまり、すべての説明ファイルをリストする必要があります）。

リンク元を画像にすると見た目を最小限に抑えられますが、EPUBの一部のリーディングシステムでは画像リンクに問題があります（リンクが有効にできません）。

以上の欠点にもかかわらず、ハイパーリンクは現在EPUBでサポートされている信頼性の高い手法の1つです。

要約