H43: id属性及びheaders属性を用いて、データテーブルのデータセルを見出しセルと関連付ける

この実装方法の目的は、（データテーブル内の）各データセルを適切な見出しセルと関連付けることである。まず、各データセル（td要素）にheaders属性を付加する。次に、データセルの見出しとなるセルにはid属性を指定する。データセルのheaders属性で指定するのは、関連付けられる見出しセルのid属性値であり、2つ以上のidを含める場合はスペース区切りで列挙する。

この実装方法は、データセルを2つ以上の行見出し及び（又は）列見出しに関連付ける場合に利用する。こうすることで、th要素のみ、またはth要素にscope属性を付けただけでは、データセルと見出しセルの関係が複雑すぎて定義できない場合でも、スクリーンリーダーは各データセルと関連付けられている見出しセルを読み上げることができる。また、表現形式が変わったとしても、これらの複雑な関係を知覚しやすくなる。

この実装方法を、レイアウトテーブルに利用することは推奨しない。なぜなら、レイアウトのためにテーブルを利用する際には、意味がないにも関らず何らかの関係性を示してしまうことになるからである。

この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

• HTML 4.01 header information with data cells

• H39： caption 要素を用いて、データテーブルの表題とデータテーブルを関連付ける
• H51： テーブルのマークアップを用いて、表の情報を提示する
• H63： scope 属性を用いて、データテーブルの見出しセルとデータセルを関連付ける
• H73： table 要素の summary 属性を用いて、データテーブルの概要を提供する

チェックポイント

1. レイアウトテーブルかどうかを確認、テーブルのセルの内容が同じ行や列に含まれる他セルの内容と関係があるかどうか判断する。「いいえ」の場合、そのテーブルはレイアウトテーブルである。「はい」の場合、そのテーブルはデータテーブルである。

2. データテーブルである場合、2つ以上の行見出し及び（又は）列見出しと関連付けられているあらゆるデータセルのheaders属性に、関連付けられている全ての見出しセルのidを指定している。

3. データテーブルでは、id属性またはheaders属性を指定しているあらゆるセルについて：

   1. データセルのheaders属性で指定した各idが、見出しセルのid属性値と一致している。

   2. データセルのheaders属性で、そのデータセルと関連付けられた全ての見出しのid属性値を指定している。

   3. 全てのidが一意的であり、重複して使用していない（つまり、ページの中で2つ以上の要素が同じidを持つことはできない）。

判定基準

• レイアウトテーブルの場合、どのセルにもheaders属性又はid属性がない。

• データテーブルで、id属性を指定した全てのセルについて、3.a、3.b、3.cを満たしている。

• データテーブルで、2つ以上の行見出し及び（又は）列見出しと関連付けられた全てのデータセルについて、2.を満たしている。

注意： この実装方法が「達成基準を満たすことのできる実装方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの実装方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の実装方法によってその達成基準が満たされていることもありうる。