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

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

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

適用 (対象)

HTML 及び XHTML

これは達成基準 1.3.1: 情報及び関係性 (失敗) に関する達成方法である。

解説

この失敗例は、データテーブルが、テーブルコンテンツの内側からプログラムによる解釈が可能な見出しを作成するために、見出し要素 (th) 又はほかの適切なテーブルマークアップ (scope) 属性、headers 及び id 又は ARIA ロール columnheader / rowheader) を使用しないときに起こる。データセルがヘッダー情報とともにのみ明瞭である場合、ヘッダーをプログラムによる解釈が可能にすることは、特に重要である。スクリーンリーダーの利用者がテーブルコンテンツを水平又は垂直にナビゲートする場合、データセル内の情報に必要な文脈を提供するために変更された見出しを読み上げることができる。

事例

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

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

コード例:

<table>
   
   <tr>
      <td>Name</td>
      <td>Age</td>
      <td>Height (cm)</td>
      <td>Weight (kg)</td>
   </tr>   
   
   <tr>
      <td>Linda</td>
      <td>33</td>
      <td>169</td>
      <td>59</td>
   </tr>   
   
   <tr>
      <td>Jack</td>
      <td>37</td>
      <td>184</td>
      <td>74</td>
   </tr>    
   
   <tr>
      <td>Kira</td>
      <td>8</td>
      <td>120</td>
      <td>21</td>
   </tr>   
   
   <tr>
      <td>Daniel</td>
      <td>3</td>
      <td>79</td>
      <td>14</td>
   </tr>  
</table>

例 1 の実装を見る (同じブラウザウィンドウで開きます)

検証

手順

全てのデータテーブルについて、次のいずれかのメカニズムを用いて、テーブル見出しが正しくプログラムによる解釈が可能かどうかを確認する:

  1. テーブル見出し要素 (th) でマークアップされた見出し
  2. テーブル見出しが 1 行より多い又は 1 列より多いテーブルの th における scope 属性
  3. テーブル見出しが 1 行より多い又は 1 列より多いテーブルの th における scope 属性
  4. headers 属性と id 属性を用いて関連付けられた見出し及びデータのセル
  5. scope 属性を持つ td 要素としてマークアップされた見出し
  6. ARIA ロールの rowheader 属性又は columnheader 属性でマークアップされた見出し
訳注

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

期待される結果

  • 上記の全ての結果が偽である場合、この失敗条件は適用され、コンテンツは達成基準の失敗となる。