要約

一つの画像が2ページにわたって表示される場合は、最初のページに代替テキストと説明を入れて、2ページ目には、その説明への参照を設けます。

解説

固定レイアウト、特に印刷物を複製するレイアウトでは、例えば地図のような、2ページにまたがる画像は一般的です。隣り合わせのページで合成された見開き(synthetic spreads)を使用すると、コンテンツ製作者は両方の画像を同時にリーディングシステムの画面に配置できます。

分割された画像を効果的に説明するにはどうしたら良いかが問われます。それぞれ半分ずつを別々に説明しますか。画像の半分だけでは意味をなさない場合はどうしますか。どちらか片方だけを説明しますか。そうであれば、もう片方の半分はどうしますか。

一般的なWebテクニックでは、一つのページに関連する画像のグループがある場合、最初の画像のみを説明して、他の画像は装飾として扱うことで、ユーザーが重複した説明に遭遇しないようにします。

<figure aria-details="map-desc">
   <figcaption>…</figcaption>
   <img src="map-pt1.jpeg" alt="World Map" />
   <img src="map-pt2.jpeg" alt="" />
</figure>

ただし、この手法は出版物ではうまく機能しません。なぜなら、見開きページ内の関連する画像が別々のページにあるためです(つまり、一つの画像のみが説明されている場合、支援技術のユーザーには空のページのように見えます)。

この問題の解決策は、最初の画像に説明を提供し、代替テキストを使用してユーザーに画像が分割されていることを案内することです。

たとえば、見開きの最初の画像の代替テキストに、画像がいくつに分割されているかの合計数を入れます。

<body>
<img src="map-pt1.jpeg" alt="World Map (Page 1 of 2)" aria-details="map-desc" />
…
</body>

2ページ目には、それが見開きの2ページ目であることを示し、説明については最初のページを参照します。

<body>
<img src="map-pt2.jpeg" alt="World Map (Page 2 of 2). Refer to previous page for description." />
…
</body>

この方法は、テキストを直線的にたどるユーザーにとっては、既に説明を見ているために多少の冗長性がありますが、特定のページにジャンプするなどして、最初に見開きの2ページ目を開いたユーザーがコンテキストを失わないように保障できます。

注記

拡張説明を追加する方法の詳細については、固定レイアウト画像のナレッジベースページを参照してください。

関連リンク