WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

F91: 達成基準 1.3.1 の失敗例 - テーブルの見出しセルを正しくマークアップしていない

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

これらの達成方法(参考)の使用法及び、それらがWCAG 2.0 達成基準(規定)とどのように関係するかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用(対象)セクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法があるからといって、WCAG 2.0 を満たすコンテンツを作成する際に、常にその技術が使用可能であるわけではない。

適用(対象)

HTML 及び XHTML。

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

ユーザエージェント及び支援技術によるサポート

F91 に関するユーザエージェントサポートノート (英語)を参照のこと。

解説

見出し要素(th)やテーブルコンテンツの中からプログラム的に見出しを算出させるためにほかの適切なテーブルマークアップ(scope属性、headers及びidあるいはARIA ロール columnheaderrowheader)が使われていないときにこの失敗例は起こる。データセルが見出し情報と組み合わせるときだけはっきりする場合、見出しをプログラム的に算出可能にするのは特別に重要である。スクリーンリーダーの利用者がテーブルコンテンツを縦あるいは横に閲覧する場合、見出しは必要な文脈を提供するために読み上げられる。

事例

失敗例 1: 見出しが適切にマークアップされていない

このテーブルは見出しとして th(あるいはほかの適切なヘッダマークアップ)を使っていない。かわりに、すべてのセルに td 要素が使われている。セルからセルへ移動するのに、スクリーンリーダーは見出しセルに関連付けられたコンテンツの読み上げにしばしば失敗する。

Example Code:


<table>
   
   <tr>
      <td>氏名</td>
      <td>年齢</td>
      <td>身長 (cm)</td>
      <td>体重 (kg)</td>
   </tr>   
   
   <tr>
      <td>リンダ</td>
      <td>33</td>
      <td>169</td>
      <td>59</td>
   </tr>   
   
   <tr>
      <td>ジャック</td>
      <td>37</td>
      <td>184</td>
      <td>74</td>
   </tr>    
   
   <tr>
      <td>キラ</td>
      <td>8</td>
      <td>120</td>
      <td>21</td>
   </tr>   
   
   <tr>
      <td>ダニエル</td>
      <td>3</td>
      <td>79</td>
      <td>14</td>
   </tr>  
</table>
							

View example 1 (opens in same browser window)

検証

チェックポイント

全てのデータテーブルにとって、テーブル見出しが正しくプログラム的に設定されているかどうかを次の仕組みのどれか一つを使って確認する:

  1. テーブル見出し要素(th)でマークアップされた見出し

  2. テーブル見出しが1行以上あるいは 1 列以上あるテーブルの th における scope 属性

  3. テーブル見出しが1行以上あるいは 1 列以上あるテーブルの th における scope 属性

  4. headers 属性と id 属性を用いて関連付けられたヘッダとデータのセル

  5. scope 属性を持つ td 要素としてマークアップされたヘッダ

  6. ARIAのロールの rowheader 属性あるいは columnheader 属性でマークアップされた見出し

判定基準