2024年02月 / 01月≪ 1234567891011121314151617181920212223242526272829≫03月
2009.02.09(Mon)
Top Page > CSS/XHTML > 【html/xhtml】ユーザビリティを高める「<label>」の使い方

【html/xhtml】ユーザビリティを高める「<label>」の使い方

Webアクセシビリティ ~標準準拠でアクセシブルなサイトを構築/管理するための考え方と実践~ (Web Designing BOOKS)
文字コード宣言と日本語の出現位置の関係に続いて、もう一つ書きたかったのが「<label>」の使い方です。

意外と「<label>」の存在自体を知らない方が多いのではないかな?
「<label>」はフォーム要素に使われるタグで「<input type="text">」や「<input type="radio">」等と共に使われます。

「<label>」の使い方は二つあり、一つはフォーム要素ごと「<label>」で囲う方法です。
<label>名前:<input type="text" name="kanjiname" /></label>
<label>フリガナ:<input type="text" name="kananame" /></label>

もう一つは「<label>」に対応する「id」をフォーム要素に付与し、「<label>」はフォームの項目を表す文字列を囲う方法です。
この時はフォーム要素に付与したidを、<label for"">を使って、「<label for"id">」という形にします。つまりフォーム要素のidと、「<label for"id">」のidは対応する形になります。
<label for"name1">名前</label>:<input type="text" name="kanjiname" id="name1" />
<label for"name2">フリガナ</label>:<input type="text" name="kananame" id="name2" />

この二つの「<label>」の使い方の何が違うかと言うと、前者はOperaやFireFoxも対応していますが、IE6等のレガシーブラウザは対応していません。後者は両方のブラウザで使えます。すなわちIE6等のレガシーブラウザをターゲットブラウザに含める場合には後者の方法が有効です。

「<input type="text">」の場合は入力フォームにポイントを置くのが一般的なユーザの行動ですのでそれほど問題ではありませんが、「<label>」が最大に有用性を発揮するのは「<input type="radio">」や<input type="checkbox">と共に使用する場合です。

「<label>」を使わない場合、または前者の方法で「<label>」を使った場合はレガシーブラウザでは、小さくクリックし難いラジオボタンまたはチェックボックスをクリックしなければ選択できません。
後者の方法であれば項目名をクリックすれば選択ができるようになり、ユーザの負担を軽減することができません。
<input type="checkbox" name="hobby" value="music" id="option1" /><label for"option1">音楽</label>

「<label>」は適切に使うことによって、入力や選択が面倒なフォーム要素のユーザビリティを確実に向上することができます。
フォーム要素と「<label>」のfor属性に使用するidの管理がやや面倒ですが、面倒さを差し引いてもユーザメリットの方が大きいと判断されるなら是非使うべきでしょう。
関連記事

タグ(ブログ内検索もできます)html xhtml label ラベル

23:38  |  CSS/XHTML  |  TB(0)  |  CM(0)  |  EDIT  |  Top↑

関連エントリー

Loading


Comment

コメントを投稿する

※コメントは承認するまで表示されません。


管理者だけに表示

▲PageTop

Trackback

この記事のトラックバックURL

この記事へのトラックバック

 | BLOGTOP |