要約

表の目的を説明するキャプションを追加します。

テクニック

• caption要素にタイトルを指定します。[[WCAG-1.3.1]]

例

<table>
   <caption>Table 4 — Weights and Measures</caption>
   …
</table>

<figure>
   <figcaption>Table 4 — Weights and Measures</figcaption>
   <table>
      …
   </table>
</figure>

<table aria-label="Weights and Measures">
   …
</table>

解説

出版物のテキストからその目的が完全に明らかで追加の説明が不要な表もありますが、そうではない表もよくあります。表は通常、それ自体で完結しており、テキストからは一時的に参照されるだけかもしれません。キャプションを追加することで、ユーザーはその表の目的を確実に把握できるようになります。

キャプションは見出しのようなもので、短く、表の具体的な目的を示すものでなければなりません。

キャプションを追加するには、主に二つの方法があります。

• caption要素を使用する方法。
• 表をfigureで囲み、figcaptionを追加する方法。

caption要素は、table要素下の最初の任意要素です（例 1を参照）。表の見出しがキャプションに指定されている場合、デフォルトでは表の上に斜体で表示されますが、このスタイルは変更できます。

また、figure要素を使用して、表をキャプションに関連付けることもできます。この場合、figcaption要素がキャプションを提供します（例2を参照）。表のcaption要素とは異なり、figcaptionはfigureの最初の要素にも最後の要素にもできます。

aria-label属性を使用して表にキャプションを追加することも可能ですが（例3を参照）、この方法は、視覚的なラベルを提供する方法がまったくない場合にのみ推奨されます。aria-label属性を使用すると、キャプションは支援技術のユーザーにしか伝わりません。また、すべての支援技術がこの方法でマークアップされたキャプションを読み上げるわけではありません。

関連リンク

• WCAG —キャプション要素を使用してデータ表キャプションをデータ表に関連付ける