figure要素の使い方 — 図やコード例をひとまとめにする

figureは、図・写真・コード例などを、ひとまとまりとして示す要素です。その内容に説明を付けるときは、figcaptionを一緒に使えます。

先に結論

コード例をまとめる

次の例では、コードと説明を一つのまとまりにしています。aria-labelledbyは、図の名前として使う説明文を図と結び付けます。

const total = prices.reduce((sum, price) => sum + price, 0);

画像の説明と図の説明

画像を入れるとき、altは画像の代わりになる短い説明です。figcaptionは、画像を含むまとまりについて読者に伝える説明です。役割が違うため、いつも同じ文を繰り返す必要はありません。

たとえば、altには写真に写っているものを書き、figcaptionには撮影場所や、その写真が本文とどう関係するかを書けます。

グラフや仕組みを示す図では、短いaltだけで大切な数字やつながりを伝えきれないことがあります。画像が何を表すかはaltで短く伝え、くわしい説明は図の近くの文章や表にも書きます。グラフや図の例も確認してください。

使うときの目安

• 図やコード例を、前後の本文からひとまとまりとして参照できる。
• そのまとまりに見える説明を付けたいときは、figcaptionを使う。
• 小さな画像を文の一部として置くだけなら、無理にfigureで囲まない。
• 本文から離れた補足や広告などは、figureではなく別の要素が合う場合がある。

figureで囲んでも、その内容が本文と無関係になるわけではありません。図やコード例のまとまりも、前後の文章の流れに含まれます。

よくある間違い

• 写真なら何でもfigureに入れる。文の一部になる小さな画像などは、単独のまとまりにしなくてもよい場合があります。
• figcaptionを画像のaltの代わりにする。画像には、画像が見えないときに必要なaltも考えます。
• figcaptionをfigureの途中に置いたり、複数置いたりする。仕様では最初か最後に一つ置きます。

もう少し詳しく

図に番号を付けて本文から参照すると、図を別の場所へ移しても説明を保ちやすくなります。「上の図」のように位置だけで示すと、配置を変えたときに意味が分かりにくくなることがあります。

支援技術に図のまとまりの名前を伝える方法は、ブラウザーやHTML-AAMの版によって細かな扱いが異なります。必要なら、aria-labelledbyで図と説明を結び付け、実際の環境でも確認します。

関連ページ

画像自体の説明はimg要素、表の題名はcaption要素で確認できます。仕様とブラウザー・Accessibility Treeの観測はYugien Atlasのfigure Topicにまとめています。