データテーブルの見出しセルをth要素でマークアップしていますか?
米国508条 1194.22(g); WAI/ WCAG1.0 チェックポイント 5.1
 
 
概要

Webページに見出しとして(すなわち、thタグで)マークアップされたセルのないテーブルがあります。もし、そのテーブルがデータを表すために使われているのであれば、見出しを追加してください。

 
 
チェック方法

もし、そのテーブルがデータを表しているのであれば、それぞれの行と列に適切な見出しがあることを確認してください。

最も簡単な方法は、テーブルのセルの行を<th>タグでマークアップして、他の各行の一番目のセルもthタグでマークアップすることです。

さらに、

  • <th>タグには、識別のためにid属性をつけるべきです。
  • <td>タグには、適切なthタグと関連付けるheaders属性をつけるべきです。

あるいはまた、<th>タグにはscope="col" あるいは scope="row" という属性をつけます。これは、その見出しセルが、それぞれ列全体あるいは行全体のデータセルに対する見出しセルであることを示します。

<th>タグの中でabbr属性を用いて見出しの省略語を提供して、特定のブラウザがそれを繰り返すようにするのもよいかもしれません。

 
 
解説

テーブルは、バスの時刻表、地域別販売数の比較、あるいは従業員名簿、のようなデータを表すのに用いることができます。こういったデータテーブルのセルは、相互に関連性があり、一つのグループとして認識されます。また、テーブルはページ上でイメージおよびテキストをレイアウトするのに用いることもできます。このようなレイアウトテーブルの各セルは独立したものとして見なされます。

データテーブルは、縦横の二次元で情報を伝えるのに用いられ、しばしば特定のユーザーにはその内容が理解できないのです。以下のような例を考えてみてください。

  • テキストブラウザは、複数の行と列を正しく一列に並べることができないかもしれない。
  • 音声ブラウザはテーブルの内容を連続して読み上げる。
  • 点字ピンディスプレイもテーブルを連続してスキャンする
  • (PDAあるいは携帯電話のような)とても小さいディスプレイのブラウザはテーブルの限られた部分しか表示しない

これらすべてのケースにおいて、ユーザーはセルの前後関係(そのデータセルが参照しているのはどの行と列の見出しセルなのか?)を記憶しなければなりません。これは、例えば、テーブルが大きいとき、あるいはユーザーが急いでいるとき、ユーザーが必要な情報を探すにはあまりにも無理な要求であり、耐えられないことです。

また、こういったシチュエーションでは、ユーザーはテーブルのあるセルから他のセルへ直接移動できないかもしれないことも考慮してください。ユーザーは、あるセルから(例えば、同じ行の中で)隣のセルに移動するしかないのです。

一方、レイアウトテーブルは、情報を伝えるために用いられるものではありません。そのため、アクセシブルである必要はありません。しかし、W3Cはページのコンテンツをレイアウトするにはスタイルシートを用いることを推奨しています。詳しい情報は、http://www.w3.org/TR/WCAG10-CSS-TECHS/#style-alignment を参照してください。

また、レイアウトテーブルはノングラフィカルなブラウザによってリニアライズ(線形化)されることに注意してください。言い換えれば、レイアウトテーブルのセルのコンテンツは、HTMLファイルでの出現順で並べられるのです。これは、もし複数のセルに複数のボタンがあるときには、とても使えるとは思えない順序で並べられるかもしれないということを意味します。より詳細なディスカッションは、http://www.jimthatcher.com/webcourse4.htm を参照してください。