【注意】この文書にはより新しいバージョンが存在します: WCAG 2.1 達成方法集
この達成方法 (参考) の使用法と、この達成方法が WCAG 2.0 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.0 を満たすコンテンツを作成するために使用できることを意味するものではない。
HTML 及び XHTML
これは、次の達成基準に関連する達成方法である:
この達成方法の目的は、(データテーブル内の) 各データセルを適切な見出しセルと関連付けることである。まず、各データセル (td
要素) に headers
属性を付加する。次に、データセルの見出しとなるセルには id
属性を指定する。データセルの headers
属性で指定するのは、関連付けられる見出しセルの id
属性値であり、二つ以上の id
を含める場合はスペース区切りで列挙する。
この達成方法は、データセルを二つ以上の行見出し及び/又は列見出しに関連付ける場合に利用する。こうすることで、th
要素のみ、または th
要素に scope
属性を付けただけでは、データセルと見出しセルの関係が複雑すぎて定義できない場合でも、スクリーンリーダーは各データセルと関連付けられている見出しセルを読み上げることができる。また、提示形式が変わったとしても、これらの複雑な関係を知覚しやすくなる。
この達成方法を、レイアウトテーブルに利用することは推奨しない。なぜなら、レイアウトのためにテーブルを利用する際には、意味がないにも関らず何らかの関係性を示してしまうことになるからである。
訳注: WAIC では H43 に関するアクセシビリティ・サポーテッド(AS)情報を提供している。
2014 年 6 月版のアクセシビリティ・サポーテッド(AS)情報: H43 では、「要注意」と評価されている。WAIC はウェブ制作者にこの達成方法が一部の環境では動作しないことに注意を促すものである。
訳注: WAIC では H43 に関するアクセシビリティ サポーテッド(AS)情報を提供している。
2020 年 3 月版の アクセシビリティ サポーテッド(AS)情報: H43 も参照されたい。
コード例:
<table>
<tr>
<th rowspan="2" id="h">Homework</th>
<th colspan="3" id="e">Exams</th>
<th colspan="3" id="p">Projects</th>
</tr>
<tr>
<th id="e1" headers="e">1</th>
<th id="e2" headers="e">2</th>
<th id="ef" headers="e">Final</th>
<th id="p1" headers="p">1</th>
<th id="p2" headers="p">2</th>
<th id="pf" headers="p">Final</th>
</tr>
<tr>
<td headers="h">15%</td>
<td headers="e e1">15%</td>
<td headers="e e2">15%</td>
<td headers="e ef">20%</td>
<td headers="p p1">10%</td>
<td headers="p p2">10%</td>
<td headers="p pf">15%</td>
</tr>
</table>
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
HTML 4.01 header information with data cells
訳注: HTML 4.01 は Superseded Recommendation としてマークされ、廃止された仕様である。上記は、HTML 5.2§4.9.10. The th element を代わりに参照できる。
レイアウトテーブルを確認する: 内容が同じ行と列の両方に含まれる他のセルの内容と関係があるかどうか判断する。「いいえ」の場合、そのテーブルはレイアウトテーブルである。「はい」の場合、そのテーブルはデータテーブルである。
データテーブルに対しては、二つ以上の行見出し及び/又は列見出しと関連付けられているあらゆるセルが、そのセルに関連付けられている全ての見出しの id
を指定している headers
属性を含むことを確認する。
あらゆるセルに id
属性又は headers
属性が含まれるデータテーブルの場合:
データセルの headers
属性で指定した各 id
が、見出し要素の id
属性値と一致していることを確認する。
データセルの headers
属性が、そのデータセルと関連付けられた全ての見出しの id
属性値を含んでいることを確認する。
全ての id
が一意であることを確認する (つまり、ページの中で二つ以上の要素が同じ id
を持つことはできない)。
テーブルがレイアウトテーブルの場合、どのセルにも headers
属性又は id
属性がない。
テーブルがデータテーブルで、かつセルが id
属性を含む場合、3.a、3.b、及び 3.c の結果が真である。
テーブルがデータテーブルで、かつ二つ以上の行見出し及び/又は列見出しと関連付けられた全てのセルについて、2. の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。