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 ロール columnheader / rowheader) を使用しないときに起こる。データセルがヘッダー情報とともにのみ明瞭である場合、ヘッダーをプログラムによる解釈が可能にすることは、特に重要である。スクリーンリーダーの利用者がテーブルコンテンツを水平又は垂直にナビゲートする場合、データセル内の情報に必要な文脈を提供するために変更された見出しを読み上げることができる。

事例

失敗例 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 属性でマークアップされた見出し

訳注: 2 と 3 は全く同一の内容であるが、原文ママである。

期待される結果