データテーブルの見出しセルをth要素でマークアップしていますか?
JIS 5.2 c); WCAG 5.1; 508条 (g)
 
 
概要

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

 
 
修正/チェック方法

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

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

さらに、

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

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

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

 
 
修正/チェックのポイント

大きすぎる表は一覧性が悪くなります。また、表の入れ子やセルの結合を多用すると、音声ブラウザで意図したとおりに読み上げられないことがあります。

音声ブラウザで表を参照した場合、音声ブラウザは、表を左上から右下に 1セルづつ読み上げます。そのため、行や列の関係がわかりにくくなる場合があります。

また、表に適切なタグを指定していない場合、音声ブラウザは、各行・各列の見出し項目を読み上げず、表の内容を正しく把握できない場合があります。

  • セル数の多い大きな表は避け、小さな表にすることが望ましい。
  • 音声ブラウザの読み上げ順序を考慮して、テーブルを作成する。
  • 行や列の見出し項目名は、<th>タグを使って指定する( <td>タグを使用しない)。
  • セルの結合は、必要最小限とし、複雑に入り組んだ表にしないことが望ましい。
  • 複雑な表には、scope属性、id属性、headers属性を使用することが望ましい。
  • 複雑な表には、テキストによる解説を記述する。
  • 数値を表示するときは、視覚的に煩雑にならない範囲で、各セルに単位を記述する。

『富士通ウェブ・アクセシビリティ指針 第2.0版』 © 2004 富士通株式会社

 
 
JIS関連項目

5.2 構造及び表示スタイル
c)
表は,分かりやすい表題を明示し,できる限り単純な構造にして,適切なマーク付けによってその構造を明示しなければならない。
参考 音声ブラウザなどを利用するとき,構造を規定しないと,読み上げているところが表の中身であることを認識できなかったり,内容を理解できなかったりすることがある。
例2. HTML では,見出しセルには,th 要素を使い項目の見出しであることを明示する。

JIS X 8341-3:2004『高齢者・障害者等配慮設計指針-情報機器における機器,ソフトウェア及びサービス-第三部:ウェブコンテンツ』(© 財団法人 日本規格協会)

 
 
解説

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

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

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

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

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

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

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

 
 
JIS X 8341-3について

JIS X 8341-3 の内容は、以下のサイトにて規格番号「X8341-3」で検索して、規格票をご覧ください。

  • 閲覧:日本工業標準調査会(JISC)
    http://www.jisc.go.jp/
  • 購入:日本規格協会(JSA Web Store)
    http://www.webstore.jsa.or.jp/