要約
図表にはその目的を示すキャプションを付けます。
テクニック
- キャプションを付けます。[[WCAG-1.3.1]]
例
例 1 — キャプションと説明付きの画像
<figure>
<img src="images/blob.jpeg" alt="the blob"
aria-describedby="img01-desc"/>
<figcaption>
Figure 3.7 — The blob is digesting Steve
McQueen in this unreleased ending to the
classic movie.
<aside class="hidden" id="img01-desc">
<p>
In the photo, Steve McQueen can be seen
floating within the gelatinous body of
the blob as it moves down main street …
</p>
</aside>
</figcaption>
</figure>例 2 — 説明リンク付きの画像
<figure>
<p><a href="blob-desc.xhtml">Description</a></p>
<img src="images/blob.jpeg" alt="the blob"/>
<figcaption>
Figure 3.7 — The blob is digesting Steve
McQueen in this unreleased ending to the
classic movie.
</figcaption>
</figure>例 3 — figcaption を使用した説明付きの表
図表に表が含まれている場合は、表のcaption要素を使用しないでください。 figcaptionとcaption両方を含めると、両方がレンダリングされます。
<figure>
<figcaption>
Characteristics with positive and
negative sides.
<aside class="hidden" id="tbl01-summary">
<p>Summary</p>
<p>
Characteristics are given
in the second column…
</p>
</aside>
</figcaption>
<table aria-describedby="tbl01-summary">
…
</table>
</figure>例4 — 見出し付きの図表
図表にキャプションとは別の見出しがある場合、図表をaside要素で囲み、その要素に見出しを配置することをお勧めします。図表はセクション化されたコンテンツではないため、見出しをfigureタグ内に配置すると、支援技術を使用するユーザーによるナビゲーションの妨げになります。
<aside aria-labelledby="fig-hd">
<h3 id="fig-hd">Figure 1.2 — Hello Universe!</h3>
<figure>
<pre>
…
</pre>
<figcaption>
The original "hello world" example is expanded to show how …
</figcaption>
</figure>
</aside>解説
図表には、画像、グラフ、表、コードスニペットなど、さまざまな形式があります。ただし、図表の中心的な特徴は、それが主要な説明の補助的要素であることです（つまり、図表をすぐに読まなくても、テキストを追うことができます）。画像、グラフ、および同様のコンテンツが主要な文脈の一部である場合は、figureタグで囲まないでください。
図表のコンテンツは HTML のfigure要素にカプセル化されており、 figcaption要素を使用して説明的なキャプションをコンテンツに関連付けることもできます。
キャプションは図表の内容の後に置かれることが多いため、これまでは、画像や表に続く説明文に到達するまで、読者は図表の内容がわからないことが多かったのですが、 figcaption要素により、読者が図表に入るとすぐに支援技術がキャプションを読み上げられるようになりました。
figcaption要素はfigureの最初または最後に配置しなければならないことに注意してください。
関連リンク
- MDN — <figure>: キャプションが付けられる図表要素
- HTML —
figure要素 - HTML —
figcaption要素