要約

読み取っているデータのコンテキストを支援技術のユーザーが理解できるように、テーブルヘッダーが適用される列または行を識別します。

テクニック

• 表のヘッダーを識別し、その範囲（行または列）を定義します。[[WCAG-1.3.1]]

例

<table>
   <thead>
      <tr>
         <th></th>
         <th>1950</th>
         <th>1975</th>
         <th>2000</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <th colspan="4" scope="rowgroup">Gondor</th>
      </tr>
      <tr>
         <th>Male</th>
         <td>1,001,542</td>
         <td>1,583,771</td>
         <td>2,221,945</td>
      </tr>
      <tr>
         <th>Female</th>
         <td>1,122,947</td>
         <td>1,782,371</td>
         <td>2,544,187</td>
      </tr>
   </tbody>
   <tbody>
      <tr>
         <th colspan="4" scope="rowgroup">Mordor</th>
      </tr>
      …
   </tbody>
</table>

解説

scope属性は、ヘッダーとセルの関係を明確にするために使用されます。この属性は、要素の方向性を明確にするためにth要素に付加され、次の四つの値のいずれかを取ります。

col

col値は、ヘッダーがその下のセルまたは上のセルに適用されることを示します（言語の方向性によって異なります）。

col値は、複数の列にまたがるヘッダー（つまり、colspan属性を持つヘッダー）で使用できます。

colgroup

colgroup値は、ヘッダーが対応するcolgroup要素定義内のセルに適用されることを示します。

colgroup値は、常にテーブルのcolgroup要素宣言に対応しています。colgroup要素が定義されていない場合、値は無効です。

row

row値は、ヘッダーがその右側または左側のセルに適用されることを示します（言語の方向性によって異なります）。

row値は、複数の行にまたがるヘッダー（つまり、 rowspan属性を持つヘッダー）で使用できます。

rowgroup

rowgroup値は、ヘッダーが属する行のグループ内の上または下、および右または左（言語の方向性によって異なります）のセルにヘッダーが適用されることを示します。

行グループは、ヘッダーが含まれるthead 、 tbody 、またはtfootによって定義されます。これらの要素のいずれも指定されていない場合、属性値は無効です。

最初の行または列にヘッダーセルが含まれる単純な表では、スコープを指定する必要はありません。あいまいな場合は常にスコープを指定することをお勧めします。

たとえば、表がセクションに分割されている場合、行グループが適切に定義されていないと、各セクションのヘッダー行が各セルに対して読み上げられる可能性があります（例1を参照）。

このような曖昧さがある場合にスコープ情報を宣言しないと、支援技術はヘッダーを適用する方法について最善の推測をしようとして、誤った解釈をしてしまう可能性があります。

関連リンク

• MDN — <table>: テーブル要素
• HTML — table要素