figure要素とfigcaption要素は本文から一単位として参照する図と説明を組にする

figure要素は、本文から図番号や名前で一単位として参照できる画像、図解、写真、コード例などに使います。説明を付ける場合は、figcaption要素をfigureの最初または最後へ置きます。

画像があるという理由だけで、すべてをfigureで囲む必要はありません。本文の一部として単独では切り離せない画像や、飾りとして置く画像は、figureの条件に合いません。

figureは本文の流れに含まれる自己完結した一単位を表す

figure要素が表すのは、本文の流れに含まれながら、一単位として参照できる自己完結した内容です。本文の説明と結び付きながら、別のページや付録へ移しても本文の流れを壊さない図やコード例かを判断します。

次のような内容が候補になります。

• 本文から「図1」として参照する操作画面
• 説明文を伴う写真
• 一まとまりのdiagramやchart
• 本文からlisting名で参照するコード例

小さなiconが一文の意味を補う場合、そのiconだけを本文から動かすと文が成立しません。この画像は自己完結した一単位ではないため、figureへ入れる理由がありません。見た目の余白や中央配置は、HTMLの意味ではなくCSSで決めます。

figcaptionはfigure全体のcaptionまたはlegendを表す

figcaption要素は、親であるfigureの残りの内容に対するcaptionまたはlegendです。figureの最初または最後の子要素として置きます。

画像へ説明を付ける基本形は次のとおりです。

<figure id="figure-contact-flow">
    <img
        src="contact-flow.png"
        alt="入力、確認、送信完了の三段階を矢印で結んだ図">
    <figcaption>図1 問い合わせフォームの処理順</figcaption>
</figure>

これは説明用の仮例です。figcaptionを画像fileの直後へ置くか、figureの先頭へ置くかは、記事全体の読み順に合わせます。途中へ置かず、captionがどの内容を説明するかをHTMLの親子関係で示します。

figureは画像専用ではありません。コード例を本文から一単位として参照するなら、preとcodeをまとめられます。

<figure id="listing-menu">
    <figcaption>Listing 1 menuを開く処理</figcaption>
    <pre><code>button.onclick = openMenu;</code></pre>
</figure>

alt属性とfigcaptionは代わりにしない

img要素のalt属性は、画像を処理できない場合や、画像表示が無効な場合に使う代替内容です。一方、figcaptionは、HTML本文に置くfigure全体のcaptionまたはlegendです。役割が違うため、figcaptionを書いたという理由でalt属性を省きません。

先ほどの仮例では、altが図の中身を「入力、確認、送信完了の三段階」と伝えます。figcaptionは、その図が「問い合わせフォームの処理順」であり、本文中の図1であることを伝えます。同じ文を機械的に二度書くのではなく、画像の代替と図全体の説明を分けます。

写真の内容がcaptionだけで十分に伝わる場合でも、altを空にできるかは、周囲の本文と画像の役割を含めて判断します。figcaptionがあることだけでは、画像が装飾かどうかを決められません。

上の図ではなく図番号で参照する

本文からfigureを参照するときは、「上の画像」「右の図」のような表示位置だけに頼りません。layoutを変えると、図が本文の下や別の列へ移り、説明が合わなくなるためです。

idを付け、図番号や名前で参照します。

<p><a href="#figure-contact-flow">図1</a>の三段階を順に確認します。</p>

図番号を変更する場合は、figcaptionと本文の参照を一緒に直します。CMSで図を並べ替えるなら、caption、id、本文linkを同じ編集単位として管理してください。

本文との関係が薄い内容はasideと分ける

figureの内容は、周囲の本文の流れに含まれます。ただし、本文の流れを壊さず、別のページや付録へ移せる一単位です。

周囲の内容と間接的に関係するだけで、別の目的を持つ内容にはasideを検討します。たとえば、本文と同じ文を大きく再掲するpull quoteは、図ではなく補足です。見た目が枠で囲まれているかではなく、本文の一部か、補足かで要素を選びます。

最初の一手は、画像を一枚選び、その画像を本文から図番号または名前で一単位として参照する必要があるかを確かめることです。必要ならfigureへまとめ、画像の代替をalt、図全体の説明をfigcaptionへ分けて書きます。