テーブルをアクセシブルにするには、見出しとなるセルをtd要素ではなくth要素でマークアップして、見出しセルと各データセルとをth要素のscope属性を用いて関連付ける必要があります。LIFTの修正ウィザードを使用すれば、たとえHTMLについて詳しく知らなくても、とても簡単に短時間でこの作業を終えることができます。

Dreamweaverでテーブルを作成します。LIFTのモニタウィンドウには、"データテーブルの見出しセル"という問題箇所が指摘されます。

Dreamweaverの編集画面でテーブルを選択すると、LIFTの修正ウィザードがこのような画面に切り替わります。まず、修正ウィザードの"SUMMARY属性"のテキストフィールドに、このテーブルの概要が分かるようにできるだけ簡潔に要約を記述します。そして、"CAPTION要素"のテキストフィールドに、このテーブルの表題を記述します。

次に、LIFTの修正ウィザードにある3つのチェックボックスを選択します。

"修正する"ボタンを押すと、見出しとなるセル部分のHTMLソースがtd要素からth要素に自動的に書き換えられ、さらに各見出しセルのth要素にはscope属性が自動的に追加されます。これにより、このテーブルの見出しセルとデータセルが関連付けられたことになり、アクセシブルなテーブルが完成したことになります。同時に、LIFTのモニタウィンドウで指摘されていた問題箇所が消えました。

多くのブラウザでは、th要素でマークアップされているセルのテキストを太字にしてセンタリングして表示します。もし、この見た目が気に入らない場合は、見た目だけを元の状態に戻すことも可能です。Dreamweaverの編集画面でテーブルの見出しセルをすべて選択すると、LIFTの修正ウィザードの画面が切り替わります。

LIFTの修正ウィザードで"THセルの見た目をノーマル(TDセルと同じ)にする"のチェックボックスを選択してから"修正する"ボタンを押すと、見出しセルのテキストがデータセルと同じ見た目に戻ります。LIFTはスタイルシートでこの見た目の制御を行っていますので、テーブルはアクセシブルなままです。上記ステップ4.が終わった時点ですでにテーブルはアクセシブルになっていますので、もし見た目の制御をする必要がなければ、ステップ5.以降はこの手順に従う必要はありません。