[サブメニュー]


[コンテンツ]

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

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

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

画面1:Dreamweaverで作成したシンプルなテーブル

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

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

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

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

ステップ3. チェックボックスを選択する

画面3:LIFTの修正ウィザードでチェックボックスを選択

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

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

画面4:見出しセルとデータセルが自動的に関連付けられた状態

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

ステップ5. 見出しセルの見た目を整える

画面5:Dreamweaverの編集画面でテーブルの見出しセルをすべて選択

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

ステップ6. アクセシブルなテーブルの完成

画面6:見出しセルの見た目をノーマルにしたアクセシブルなテーブル

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

 
 

このページの先頭へ ▲


Copyright © 2007 Sociomedia, Inc. All rights reserved.