[サブメニュー]


[コンテンツ]

チュートリアル3. アクセシブルなフォームの制作方法(入力フォームのラベルとコントロール) - LIFT 2.2

フォームをアクセシブルにするには、各コントロール(例:テキストフィールド、チェックボックス、ラジオボタン、など)とそれに対応するラベル(項目名や選択肢をあらわすテキスト)とをlabel要素を用いて関連付ける必要があり、これを手作業で行おうとすると、非常に手間と時間のかかる作業になってしまいます。しかし、LIFTの修正ウィザードを使用すれば、たとえHTMLについて詳しく知らなくても、とても簡単に短時間でこの作業を終えることができます。

ステップ1. フォームを作成する

画面1:Dreamweaverで作成したフォーム

Dreamweaverでフォームのレイアウトを作成します。LIFTのモニタウィンドウには、"ラベルとコントロールの関連付け"という問題箇所がフォームにあるコントロールの数だけ指摘されます。

ステップ2. コントロールを選択する

画面2:Dreamweaverの編集画面でテキストフィールドを選択

上から順番にコントロールを選択していきます。この例では、まず"お名前(必須)"という項目のテキストフィールドを選択します。

ステップ3. 対応するラベルを選択する

画面3:LIFTの修正ウィザードで対応するラベルを選択

テキストフィールドを選択すると、LIFTの修正ウィザードがこのような画面に切り替わります。"ラベル選択"というプルダウンメニューを選んでください。テキストフィールドのラベルとなりうるテキストが、選択肢として並んでいます。この中から"お名前(必須)"をラベルとして選択して、"修正する"ボタンを押します。

ステップ4. コントロールと対応するラベルが関連付けられる

画面4:テキストフィールドとラベルが自動的に関連付けられた状態

"修正する"ボタンを押すと、"お名前(必須)"というテキストが、HTMLのソースコードでlabel要素によってテキストフィールドのラベルとして自動的に関連付けられます。LIFTの修正ウィザードでは、同じラベルがその他のコントロールのラベルとして誤って選択されないように、"お名前(必須)[割り当て済み]"となります。同時に、LIFTのモニタウィンドウで指摘されていた問題箇所が一つ消えました。

ステップ5. 各コントロールで同じことを繰り返す

画面5:フォーム内にある5つめのチェックボックスを選択

フォーム内にあるコントロールを順に一つずつ選択しながら、上記ステップ3およびステップ4を繰り返していくと、LIFTのモニタウィンドウの問題箇所が一つずつ消えていきます。この画面では最後から2つめのコントロールである"スポーツ"のチェックボックスをDreamweaverの編集画面で選択しています。そして、LIFTのモニタウィンドウには問題箇所があと2つ残っていることが示されています。

ステップ6. 残された選択肢から対応するラベルを選択する

画面6:修正ウィザードの選択肢からラベルを選択

LIFTの修正ウィザードで、このチェックボックスのラベルとなるテキストを選択します。すでに他のコントロールのラベルとして関連付けられているテキストには"[割り当て済み]"と付いていますので、それ以外のテキストから選択します。このチェックボックスのラベルは"スポーツ"なので、プルダウンメニューの選択肢の中から"スポーツ"を選択して、"修正する"ボタンを押します。

ステップ7. アクセシブルなフォームの完成

画面7:最後のコントロールのラベルを関連付けた状態

このように、フォーム内にあるコントロールを一つずつ選びながら、それに対応するラベルとなるテキストを選択していくだけで、アクセシブルなフォームの完成です。LIFTのモニタウィンドウで指摘されていた問題箇所もすべてクリアされて、最後には全部なくなりました。LIFTを使えば、面倒なHTMLコーディングを手作業で行うことなく、簡単に短時間で作業を終えることができるのです。

 
 

このページの先頭へ ▲


Copyright © 2007 Sociomedia, Inc. All rights reserved.