アクセシビリティ教室 (第三回)
データテーブルとレイアウトテーブル
次にテーブルについて考えてみよう。テーブルは本来データを示す表組みのためのものだが、Webページのレイアウトを組む際にもよく用いられている。ここでは、前者をデータテーブル、後者をレイアウトテーブルとして、説明していくことにする。
JIS X8341-3 『高齢者・障害者等配慮設計指針－情報機器における機器・ソフトウェア・サービス－第三部：ウェブコンテンツ』では、5.2 構造及び表示スタイルで"c) 表は，分かりやすい表題を明示し，できる限り単純な構造にして，適切なマーク付けによってその構造を明示しなければならない。"、"d) 表組みの要素をレイアウトのために使わないことが望ましい。"と規定されている。
アクセシブルなデータテーブルとは？
データテーブルについて、そのポイントを確認しておこう。データテーブルは、2次元でデータを視覚的に表現しているため、特に音声ブラウザやスクリーンリーダーを使用しているユーザーにとっては、その内容が理解しづらいことが多い。音声読み上げでは、テーブルの一番左上のセルから読み上げが始まり、1つずつ順に右へと移動していく。そして、右端のセルを読み上げ終わると、次の行の一番左のセルへ移動して、また1つずつ順に右へと移動していく、というのを繰り返すのだ。セルの数が多くなればなるほど、テーブルのどの部分を読み上げているのかが分かりにくくなるのだ。そこで、データテーブルでは、見出しとなるセル（見出しセル）とデータを示しているセル（データセル）とをソースコードで関連付ける必要がある。
見出しセルとデータセルとを関連付ける
まず、見出しセルをtd要素ではなくth要素でマークアップする必要がある。th要素を使うと、多くのブラウザではテキストが太字になりセンタリングされるが、見た目の制御はスタイルシートを使えばよい。そして、各見出しセルのth要素にscope属性を付加して、その見出しセルが縦方向（下）にあるデータセルの見出しになる場合はscope="col"、横方向（右）の場合はscope="row"とすればよい。
<th scope="row">見出し</th>
Dreamweaver MX 2004 では、テーブルを挿入する際に表示される[テーブルの挿入]ダイアログボックスで簡単にこの関連付けを行うことが出来るので便利だ。"ヘッダ"で見出しセルがどれかを選択するだけで、見出しセルをth要素にしてscope属性も自動的に付加してくれる。
![Dreamweaver MX 2004 の[テーブルの挿入]ダイアログボックス](images/table_dialogue.gif)
データテーブルは、セルを結合したり、見出しセルが2階層以上になっていたり、複雑な構造になる場合もある。そういった複雑なデータテーブルの場合は、LIFTを使うことで簡単に見出しセルとデータセルの関連付けを行うことが可能だ。
表のタイトルと要約を記述する
また、データテーブルにはcaption要素を用いて表のタイトルをつけて、table要素にsummary属性を付加してそのデータテーブルの要約を記述することも大切だ。これらもDreamweaver MX 2004 の[テーブルの挿入]ダイアログボックスの"アクセシビリティ"で簡単に追加できるようになっている。
レイアウトテーブルの注意点
次に、テーブルをレイアウトのために用いる場合だが、音声ブラウザやスクリーンリーダーなどの音声読み上げ順序に注意する必要がある。音声読み上げソフトは、左から右へ、上から下へ、と読み上げていくので、見た目だけを考えてレイアウトテーブルを組んでいくと音声読み上げ順序がおかしくなってしまう。この音声読み上げ順序は、LIFTのリニアライザーを用いると視覚的に確認することが出来る。
また、先に述べたデータテーブルのためのマークアップ（th要素やscope属性など）を行わないことも大切だ。
