【注意】この文書にはより新しいバージョンが存在します: WCAG 2.1 達成方法集
この達成方法 (参考) の使用法と、この達成方法が WCAG 2.0 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.0 を満たすコンテンツを作成するために使用できることを意味するものではない。
HTML 及び XHTML。
これは、次の達成基準に関連する失敗例である:
コンテンツ制作者にとってデータセルと見出しセルを明示的に関連付けるひとつの方法は id
属性及び headers
属性を使用することである。これによりコンテンツ制作者は複数の見出しセルに特定のデータセルを関連付けられる。これは複数の見出しをレベルをもつ複雑なデータテーブルの場合に必要になる。
この失敗例は、データセルと対応する見出しセルとの関係が、id
属性と headers
属性の関連付けが不完全であるため、正しくプログラムによる解釈が可能でない場合に発生する。例えば、テーブルのコードをコピーしたりコードのアップデートを忘れたときにおこる。
H43: データテーブルのデータセルを見出しセルと関連付けるために、id 属性及び headers 属性を使用する (HTML) の例 1 のような複雑なデータテーブルが存在することによる。
この例では、ネストされた見出しが使われているが、コンテンツのセルは id
属性及び headers
属性によって正しく関連付けられていない。全セルは「Exams」(id="e") のようなトップレベル見出しを参照する - これは「Projects」見出しを参照すべき最後の三つのセルにとって正しくない。また、第 2 レベルの列見出しの参照はコンテンツ (1, 2, Final) が繰り返されるようなこちらの例と違いはなくても、誤って取り違えられる。
Example Code:
<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 p1">15%</td> // should be "e e1"
<td headers="e p2">15%</td> // should be "e e2"
<td headers="e pf">20%</td> // should be "e ef"
<td headers="e e1">10%</td> // should be "p p1"
<td headers="e e2">10%</td> // should be "p p2"
<td headers="e ef">15%</td> // should be "p pf"
</tr>
</table>
データセルが id
属性及び header
属性によって見出しセルと関連付けられたテーブルの場合、プログラム的な関連付けが正しいことを確認する。
1. の結果が偽である場合、この失敗条件は適用され、コンテンツは達成基準の失敗となる。