画像の説明をfigureとfigcaptionでまとめる：altとの役割を分けよう

図の下へ説明を書いたつもりが、後から別の段落を挟んだため、どの図の話か曖昧になった。画像の説明をfigureとfigcaptionでまとめると、図とそのキャプションをHTML上で一組にできます。今回は写真集全体ではなく、図一つのまとまりを作ります。

題材は架空の展示台の配置図です。図は左右に展示台が一つずつあり、中央が通路という簡単なものを想定します。実在する施設の配置や安全上の寸法を示す資料ではありません。

本文から参照する図を、一つのまとまりにする

figureは、図やコード例などの独立した内容を表す要素です。画像すべてを必ずfigureで包むという意味ではありません。本文中で「図1」と参照する配置図なら、図と説明を一緒に扱う理由があります。

一方、見出しの横に置く飾りだけの小さな画像まで、説明付きの図にする必要はありません。今回の対象は内容を伝える図です。先に「この画像が何を伝えるか」を一文で書き、図のまとまりが必要か判断します。

図の識別情報と、図から得る情報を分ける

画面に見せる説明をキャプションと呼びます。今回は「図1　展示台の配置案」とし、どの図かを示します。画像の代替テキストであるaltには、「左右に展示台が一台ずつ並び、中央に通路がある配置」と図から読み取る内容を書きます。

キャプションとaltに同じ長文をそのまま複製する前に、何を担当させるかを分けて考えましょう。altの判断は画像の役割から代替テキストを決める記事も参考になります。キャプションがあれば常にaltを空にしてよい、という関係ではありません。

図が複雑なら短いaltだけですべてを伝えようとせず、本文にも詳しい説明を置きます。今回の単純な配置と、大量の数値を含むグラフでは、必要な説明量が変わります。

figcaptionをfigureの最後へ置く

次の断片を練習用ページのbody内へ入れます。layout.svgは別途用意する、幅600・高さ360の配置図です。画像ファイルがないままでは図は表示されないため、同じ内容の模擬図を作ってから試してください。

<figure class="layout-figure">
  <img src="layout.svg" width="600" height="360"
       alt="左右に展示台が一台ずつ並び、中央に通路がある配置">
  <figcaption>図1　展示台の配置案</figcaption>
</figure>

MDNのfigureの説明では、figcaptionをfigureの最初または最後の子要素として置けることを確認できます。今回は下に説明を置く構成なので最後にしています。説明をfigureの外へ置く形と区別してください。

図の下に続く本文まで、すべてfigcaptionへ入れる必要はありません。図そのものの説明か、次の話題の文章かを見分け、話題が変わる段落はfigureの外へ置きます。

狭い幅で、図と説明の両方を点検する

練習用のCSSは次の形です。図の幅を親に収め、縦横の比率を保てるようにします。図を縮めた結果、図内の文字が読めなくならないかは別途確認が必要です。

.layout-figure { margin: 1.5rem 0; }
.layout-figure img { display: block; max-width: 100%; height: auto; }
.layout-figure figcaption { margin-top: 0.5rem; }

キャプションが二行になる長さでも、途中で欠けないか見ます。図と説明の間隔だけを狭めても、HTML上の関連を作ったことにはならないため、見た目と要素の入れ子を両方確認しましょう。

図の名前と内容を、二種類の説明で確かめる

図、alt、キャプションを一組作り、まず表示した状態で図の名前と内容が対応するか確かめます。次に図を見ず、altと周辺の文章だけで何が分かるかを読みます。読み上げ環境で試した場合は、その環境も記録します。

完成物は画像だけでなく、図と二種類の説明の組です。無料レッスンのページに図を加える際も、キャプションを付けたことと、画像を見られない場合の情報を用意したことを別々に点検してください。