[サブメニュー]


[コンテンツ]

チュートリアル2. アクセシブルなテーブルの制作方法(複雑なテーブルの場合) - LIFT 2.2

見出しセルが2階層以上になっていたり、セルが結合されていたりすると、そのテーブルをアクセシブルにする作業もその分だけ手間がかかります。見出しとなるセルをtd要素ではなくth要素でマークアップするところまでは同じですが、まず見出しセルのth要素にid属性を付加してIDを割り振ります。そして、各データセルのtd要素にheaders属性を付加して、その値としてそのデータセルが参照している見出しセルのid属性の値を一つ一つ記述していかなくてはなりません。
テーブルの構造が複雑になればなるほど、このHTMLコーディングは非常に煩雑になり、手作業で行うと時間がかかるばかりか、どうしてもコーディング・ミスを起こしやすくなります。LIFTの修正ウィザードを使用すれば、たとえHTMLについて詳しく知らなくても、とても簡単に短時間でこの作業を終えることができます。

ステップ1. テーブルを作成する

画面1:Dreamweaverで作成した複雑なテーブル

Dreamweaverで、見出しが2階層以上になっていて、結合されたセルのあるテーブルを作成します。LIFTのモニタウィンドウには、"データテーブルの見出しセル"という問題箇所が指摘されます。

ステップ2. テーブルの要約と表題を記述する

画面2:Dreamweaverの編集画面でテーブルを選択

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

ステップ3. 見出しとなるセルを選択する

画面3:Dreamweaverの編集画面で見出しとなるセルをすべて選択

次に、Dreamweaverの編集画面で見出しとなるセルをすべて選択します。LIFTの修正ウィザードの画面が切り替わったら、"TDセルを見出しセル(TH)に変換する"のチェックボックスを選択して、"修正する"ボタンを押します。そうすると、見出しとなるセル部分のHTMLソースがtd要素からth要素に自動的に書き換えられます。

ステップ4. 見出しセルとデータセルを関連付ける

画面4:修正ウィザードで見出しセルとデータセルを関連付ける

Dreamweaverの編集画面でテーブル全体を選択します。LIFTの修正ウィザードの画面が切り替わったら、"見出し(TH)にID属性を追加"と"関連付けるデータセル(TD)にHEADERS属性を追加"という2つのチェックボックスを選択して、"修正する"ボタンを押します。
"修正する"ボタンを押すと、各見出しセルのth要素にはid属性とその値(ID)が自動的に追加されます。そして、各データセルのtd要素にはheaders属性が付加され、その値としてそのデータセルが参照している見出しセルのid属性の値が追加されます。複雑な構造のテーブルであったとしても、LIFTが自動的にその構造を解析して、見出しセルとデータセルとの関連付けを行います。これにより、このテーブルの見出しセルとデータセルが関連付けられたことになり、アクセシブルなテーブルが"ほぼ"完成したことになります。同時に、LIFTのモニタウィンドウで指摘されていた問題箇所が消えました。

ステップ5. 関連付けの内容を確認する

画面5:Dreamweaverの編集画面でデータセルを一つ選択

ステップ4.が完了すると、LIFTのモニタウィンドウには"複雑なデータテーブルの見出しセル"という問題が残っています。"?"マークはマニュアルテスト項目であることを意味し、自分の目で確認する必要があります。ステップ4.でLIFTが自動的に行った関連付けが正しいかどうかを、LIFTの修正ウィザードを使って確認する必要があるのです。
Dreamweaverの編集画面でデータセルを一つ選択すると、LIFTの修正ウィザードがこのような画面になります。"参照先"には、そのデータセルに関連付けられている見出しセルの全てがリスト表示されます。このリストにある見出しセルが、そのデータセルが参照している見出しセルとして正しいかどうかを確認します。
もし、参照している見出しセルが"参照先"にない場合は、"HEADERS属性"のテキストフィールドにその見出しセルのid属性の値を追加します。逆に、参照していない見出しセルが"参照先"にある場合は、"HEADERS属性"のテキストフィールドからそのid属性の値を削除してください。"HEADERS属性"のテキストフィールドを修正したら、"修正する"ボタンを押してください。なお、"HEADERS属性"のテキストフィールドに複数の値を記述する際には、半角スペースで間隔を空けるようにしてください。
このようにして、一つ一つのデータセルについて、LIFTが上記ステップ4.で自動的に関連付けをした見出しセルが正しいかどうかを確認したら、作業はすべて完了です。

 

このページの先頭へ ▲


Copyright © 2007 Sociomedia, Inc. All rights reserved.