HOME > ホームページ

岡田 清鷹「表におけるアクセシビリティ」

20091204

Tweet
last update: 20161129


◆狙い
・アクセスブルな表(テーブル)作成。
◆参考文献
 20097/10/26 『Webアクセシビリティ――標準準拠でアクセシブルなサイトを構築/管理するための考え方と実践』』 毎日コミュニケーションズ

今までの生存学ホームページにおける表は
http://www.arsvi.com/2000/0803ky06.htm
などのように「レイアウトテーブル」というものを使用していた。

レイアウトテーブル
◆1.通常の場合
Cell 1 1 Cell 1 2
Cell 2 1 Cell 2 2
の場合、読みあげる順番は
Cell 1 1→Cell 1 2→Cell 2 1→Cell 2 2
となる。

◆2.ちょっと複雑なレイアウトテーブルの場合
ちょっと複雑なレイアウトテーブルになってくると本文がわかりにくくなる。
レイアウトテーブルの例
ナビゲーションリンク 1
ナビゲーションリンク 2
ナビゲーションリンク 3
ナビゲーションリンク 4
バナー広告 右側ナビゲーション 1
右側ナビゲーション 2
右側ナビゲーション 3
メインコンテンツ、多くのテキスト
などの内容がウィンドウの中心を
占めている
この表が読み上げられる場合、最初にタイトルのパネルのすべての内容が読まれる。その後、次の行に進み、左側の「ナビゲーションパネル」がすべて読まれる。続いて「バナー」、「右側のナビゲーション」と進み、最後に主な内容が占めるであろう「メインコンテンツ」が読まれる。
このように結合された表では、メインとなるコンテンツを見つけられるのが難しくなるため、レイアウトにはテーブル(表)を用いないのが良いだろう。

生存学ホームページではレイアウトとしてテーブルを使うことは少ないとしても、ではデータを扱うときはどうしたらよいだろう?

データテーブル
◆1.単純なデータテーブルの場合
「単純なデータテーブル」とは次の二点の条件を満たすもの
・データセルの列見出しが同じセルの列にあって、すべての列見出しが同じ行に並んでいる
・データセルの行見出しが同じセルの行にあって、すべての行見出しが同じ列に並んでいる
 つまり、データを扱った一般的な表のこと

その際に気をつけたいのが次の二点
A.データテーブルでは、行と列の見出しがわかるようにする
B.行あるいは列の見出しが2階層異常あるデータテーブルでは、マークアップを用いてデータセルと見出しセルを関連付ける
 つまり、見出しがわかるようにすることが大事らしい
 ではそれぞれやってみる

◇Aの場合([付記:櫻井悟史]音声認識ソフトで読めること確認済み)
見出しの付け方は、行の場合は、scope="row"を、列の場合はscope="col"。
また行はtdで囲むことが一般的だが、よりわかりやすくするためにthで囲む。
こんな感じになる(全部、打ち込むのは手間だったので数値は同じです)
ペンサコラ ミルトン クレストビュー ナイスビル デフニャック スプリング チプリー
1月 1971-00 5.41 6.24 6.51 5.79 5.40 6.09
2月 1971-00 5.41 6.24 6.51 5.79 5.40 6.09
3月 1971-00 5.41 6.24 6.51 5.79 5.40 6.09
4月 1971-00 5.41 6.24 6.51 5.79 5.40 6.09
5月 1971-00 5.41 6.24 6.51 5.79 5.40 6.09
6月 1971-00 5.41 6.24 6.51 5.79 5.40 6.09
7月 1971-00 5.41 6.24 6.51 5.79 5.40 6.09
8月 1971-00 5.41 6.24 6.51 5.79 5.40 6.09
フロリダの降雨量を示す表(のつもり)

◇Bの場合(付記[櫻井悟史]:こちらは下記の通りしても音声認識ソフトで読むのは困難なようである。このぐらい複雑な表になるとエクセルでアップした方が読みやすいとの意見もあった)
2つの(論理的な)レベルの列見出しが付けられている場合(階層化テーブル)
耕起 不耕起
植え付け日 OP/OK 25P/25K OP/OK 25P/25K
4月23−26日 152 152 153 154
5月2−3日 158 151 150 154
5月10−12日 152 152 153 154
5月23−24日 152 152 153 154

どの見出しセルがどのデータセルに対応しているかを示すのは、headers/idマークアップと呼ばれる(らしい)。
このテクニックは手作業で間違いやすいが、基本的な考え方は解りやすい。それぞれの見出しセルにidを与えて、各データセルでは見出しにあるid文字列を指定する。その文字列はデータセルのheaders属性値というもので指定する。このページのタグを御覧いただけばわかるとおり、idで指定された文字列をスペース区切りで複数指定する。


*作成:岡田 清鷹
UP:20091204 REV:20091206, 20161129
ホームページ
TOP HOME (http://www.arsvi.com)