要約

ユーザーが画像から理解する必要がある情報は、テキスト形式でも提供されるようにします。

テクニック

例

例 － きわめてシンプルな画像（説明は不要）
<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 つです。

関連リンク