HTML講座 / figureとfigcaptionで図と説明をまとめる

画像や図を、その題名や説明と一つのまとまりとして扱う場合はfigureとfigcaptionを使えます。キャプションはすべての読者に見える説明で、画像を見られない場合の情報を伝えるaltとは役割が違います。

画像とキャプションを一つにまとめる

画像講座の幅960ピクセルのサンプルを、HTMLファイルと同じ場所に保存します。実寸は960×540ピクセルです。次のHTMLをbodyへ、CSSをhead内のstyleへ入れて開きます。

<figure>
  <img src="html-image-sample-lake-tree-960-v1.webp"
       alt="A tree on a small island in a lake with mountains beyond"
       width="960" height="540">
  <figcaption>Figure: the lake-and-tree example used for this lesson</figcaption>
</figure>

figure { margin: 1rem 0; }
figure img { max-width: 100%; height: auto; }

figcaptionはfigureの最初か最後の子要素にします。例では画像の下に説明が表示され、最初へ移せば上に置けます。キャプションを編集してもaltは自動変更されないため、別々に確認してください。画像のパスはimgによる画像の挿入の手順で準備します。

altとキャプションの仕事は違う

altは画像が見えないときに必要な情報や機能を伝えます。figcaptionは図の題名、文脈、出典などをすべての人へ示します。同じ長い説明を両方へそのままコピーすると、読み上げが重複する場合があります。

装飾画像なら空のaltが適切な場合もありますが、重要な情報が他の場所で提供されていることが条件です。グラフなら単に「棒グラフ」とせず主要な傾向を伝え、詳細な値は近くの表や本文で補います。W3C WAIの判断フローとHTMLアクセシビリティの基本も参照できます。

figureが不要な場合と出典の示し方

文中に普通の画像を置くだけで、独立した図や説明のまとまりがないなら、必ずfigureにする必要はありません。反対に「次の図」として参照する図や説明付きのコード例などは候補になります。画像以外の内容も含められます。

キャプション内に出典を示す場合は、前の例のfigcaptionを次に置き換えます。リンクは実際の画像ファイルを提供する既存の英語版講座です。

<figcaption>Example image source: <a href="https://www.codingfactory.net/en/15491">the file supplied with the images lesson</a>.</figcaption>

他の画像を使う場合は実際の作成者や出典と利用条件を確認します。クレジットを書くだけで利用許可を得たことにはなりません。内容モデルはMDNのfigure要素で確認できます。

表示がおかしい場合

figureにはブラウザーの初期余白が付く場合があります。余白が広いときはHTMLの意味を変える前にCSSのmarginを確認します。画像が出なければパスとファイル名、説明が出なければfigcaptionの位置と閉じタグを調べます。狭い画面での比率と、代替テキストが説明の役割を果たすかも別々に確認してください。