「フォームタグ」のアクセシビリティを考える

今回はWEBサイト構築には欠かせない、ユーザからの問合せや、アンケートを入力してもらう時に使用する「フォームタグ」について、「JIS X 8341-3（WEBJIS）」の観点とフォーム利用者の観点から、アクセスシビリティを高めるTipsをご紹介したいと思います。

「フォームタグ」には、コントロールとよばれる要素が存在し、以下の入力方法を提供します。

・buttons (ボタン)
・checkboxes (チェックボックス)
・radio buttons (ラジオボタン)
・menus (メニュー)
・text input (テキスト入力)
・file select (ファイル選択)
・hidden controls (隠れコントロール)
・object controls (オブジェクトコントロール)

これらの内、「menus (メニュー)」、「hidden controls (隠れコントロール)」、「object controls (オブジェクトコントロール)」を除き、「input」に続く「type」属性を指定することで利用できます。
※フォームタグの詳しい使い方については、「HTML4.01（邦訳）」または「XHTML 1.1（邦訳）」をご参照ください。

入力方法を提供するまではこれで問題ないと思いますが、アンケートなどに答える際、「チェックボックス」や「ラジオボタン」が意外にクリックしにくかったりします。

また、入力してほしい内容を書いたテキストをフォームタグに添えるだけでは、音声ブラウザなどを使用した場合、何を記入するためのフォームか判りにくかったりします。
例えば、ラジオボタンやがいくつも連なっていた場合、ボタンの前にあるテキストが該当のものか、後ろのものなのかか判らなくなる可能性があります。

この様な場合に役にたつのが「ラベルタグ」です。
この「ラベルタグ」は、フォームの説明書きのテキストにマークアップすると、フォームタグと関連付けることができます。

（例）
<label for="comment">コメント</label><input type="text" name="textfield" id="comment">

<label>には「for="○○"」を記入し、○○で<input>と関連付けます。
関連付けるために、<input>側には「id="○○"」を記入します。

これで関連付けはできました。
これで音声ブラウザなどでは、関連付けて認識することができ、さらに、IEやFirefox、Opera、Netscapeなどのブラウザでは、テキスト部分をクリックすると、ラジオボタンや、チェックボックスの場合は、それらを選択することができ、テキスト入力等の場合、入力可能な状態になります。

＜サンプル＞

はい いいえ
言語   --Please Seclect--   Japanese   English   Chinese   Korea
コメント
ファイルを選択

これで、「WEBJIS」への対応と、クリックしにくかったボタン類へのクリックが容易になりました。
最近はちゃんと「ラベルタグ」を使用しているWEBサイトが増えてきましたが、全体としてはまだまだ探すのに苦労する程度の普及率です。

是非、管理しているアンケートフォームなどに適用して、アクセシビリティを向上してみてください。

◇この記事が参考になりましたらこちらをクリック ≫ 人気blogランキング

◇「『うぇっぶ』のはなし」へのコメント募集中 ≫ ビジネスブログランキング100選