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属性によって正しく関連付けられていない。全セルは「練習」(id="e")のようなトップレベル見出しを参照する - これは「プロジェクト」見出しを参照すべき最後の3つのセルにとって正しくない。また、第2レベルの列見出しの参照はコンテンツ(1, 2, ファイナル)が繰り返されるようなこちらの例と違いはなくても、誤って取り違えられる。

Example Code:


<table>
   <tr>
     <th rowspan="2" id="h">宿題</th>
     <th colspan="3" id="e">練習</th>
     <th colspan="3" id="p">プロジェクト</th>
   </tr>
   <tr>
     <th id="e1" headers="e">1</th>
     <th id="e2" headers="e">2</th>
     <th id="ef" headers="e">最終</th>
     <th id="p1" headers="p">1</th>
     <th id="p2" headers="p">2</th>
     <th id="pf" headers="p">最終</th>
   </tr>
   <tr>
     <td headers="h">15%</td>       
     <td headers="e p1">15%</td>  // 「e e1」とすべき
     <td headers="e p2">15%</td>  // 「e e2」とすべき
     <td headers="e pf">20%</td>  // 「e ef」とすべき
     <td headers="e e1">10%</td>  // 「p p1」とすべき
     <td headers="e e2">10%</td>  // 「p p2」とすべき
     <td headers="e ef">15%</td>  // 「p pf」とすべき
   </tr>
</table>
							

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

検証

チェックポイント

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

判定基準