【注意】この文書にはより新しいバージョンが存在します: WCAG 2.1 達成方法集

WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

F90: 達成基準 1.3.1 の失敗例 - headers 属性及び id 属性によってテーブルの見出しとコンテンツが不正確に関連付けられている

達成方法に関する重要な情報

この達成方法 (参考) の使用法と、この達成方法が WCAG 2.0 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.0 を満たすコンテンツを作成するために使用できることを意味するものではない。

適用 (対象)

HTML 及び XHTML。

これは、次の達成基準に関連する失敗例である:

解説

コンテンツ制作者にとってデータセルと見出しセルを明示的に関連付けるひとつの方法は id 属性及び headers 属性を使用することである。これによりコンテンツ制作者は複数の見出しセルに特定のデータセルを関連付けられる。これは複数の見出しをレベルをもつ複雑なデータテーブルの場合に必要になる。

この失敗例は、データセルと対応する見出しセルとの関係が、id 属性と headers 属性の関連付けが不完全であるため、正しくプログラムによる解釈が可能でない場合に発生する。例えば、テーブルのコードをコピーしたりコードのアップデートを忘れたときにおこる。

事例

H43: データテーブルのデータセルを見出しセルと関連付けるために、id 属性及び headers 属性を使用する (HTML) の例 1 のような複雑なデータテーブルが存在することによる。

失敗例 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>
							

Failure example of table incorrectly associating headers attributes in table content (td) to table headers (th).

検証

手順

  1. データセルが id 属性及び header 属性によって見出しセルと関連付けられたテーブルの場合、プログラム的な関連付けが正しいことを確認する。

期待される結果