HOME > 全文掲載 >

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

20091204
Tweet
last update: 20160128


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

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

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

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

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

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

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

◇Ａの場合
見出しの付け方は、行の場合は、scope="row"を、列の場合はscope="col"。
また行はtdで囲むことが一般的だが、よりわかりやすくするためにthで囲む。
こんな感じになる（全部、打ち込むのは手間だったので数値は同じです）
月 年 ペンサコラ ミルトン クレストビュー ナイスビル デフニャック　スプリング チプリー
１月 1971-00 5.41 6.24 6.51 5.79 5.40 6.09
２月 1971-00 5.41 6.24 6.51 5.79 5.40 6.09
３月 1971-00 5.41 6.24 6.51 5.79 5.40 6.09
４月 1971-00 5.41 6.24 6.51 5.79 5.40 6.09
５月 1971-00 5.41 6.24 6.51 5.79 5.40 6.09
６月 1971-00 5.41 6.24 6.51 5.79 5.40 6.09
７月 1971-00 5.41 6.24 6.51 5.79 5.40 6.09
８月 1971-00 5.41 6.24 6.51 5.79 5.40 6.09
フロリダの降雨量を示す表（のつもり）

◇Ｂの場合
２つの（論理的な）レベルの列見出しが付けられている場合（階層化テーブル）
耕起 不耕起
植え付け日 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: 20160128
◇全文掲載　

TOP　HOME (http://www.arsvi.com)◇