Web標準Blogでは、Web標準の利用に興味のあるWebサイト管理者、Webデザイナーの方向けに、Web標準を利用するための手法やノウハウ、参考になるリソース等を、国内外を問わずご紹介します。
なお当Blogでは、Web標準に関する疑問や質問を募集しています。Webコンテンツ実装プロセスにまつわるお悩みでも結構ですので、お気軽に電子メールでstandards@mitsue.co.jp宛にお送りください。
2008年07月24日
label要素とその挙動
フロントエンド・エンジニア 矢倉
先週取り上げたmaxlength属性に引き続き、今回はlabel要素について調べてみました。
label要素とアクセシビリティ・ユーザビリティ
input要素そのものには、ラベルを記述する仕組みが用意されていません。このため、スクリーンリーダーなどでフォームコントロールの読み上げに支障が出ることがあります。アクセシビリティの確保のため、各フォームコントロールにはlabel要素を設けることが必要でしょう。
さて、label要素はアクセシビリティにのみ効果があるというわけではありません。ラベルを指定することは、ユーザビリティの向上にもつながります。
たとえば、チェックボックスやラジオボタンなどのコントロールは、それ自身のサイズが小さいため、クリックをしにくいという欠点があります。しかし、label要素でラベルとフォームコントロールを結びつけることにより、ラベルをクリックしたときにチェックをつけたり、ラジオボタンを選択することができるようになります。
しかし、ユーザビリティの向上を見込めるにも関わらず、label要素を利用していないフォームは数多くのWebサイトに存在しています。
ラベルとコントロールの視覚的な結びつき
さて、label要素は「それがlabel要素なのか見てもわからない」という問題を抱えています。label要素には視覚的なデフォルトスタイルが存在しないため、コントロールとラベルを並べても、ただのテキストなのか、label要素なのかの区別がつかないのです。ラベルに相当するテキストをクリックしても選択されず、がっかりされた方は少なからずいるのではないでしょうか。
では、ラベルをクリックしている時やカーソルを重ねた時に、何かしらの視覚的な反応はあるのでしょうか。次のようなサンプルを作って検証してみました。
まず、FirefoxとOperaですが、特に視覚的なフィードバックはありませんでした。Safariもほぼ同様ですが、クリック中の状態（CSSで言うところの :active）では、チェックボックスの色が少し暗くなるといった反応がありました。
このような状況もあってか、IEの挙動には感心しました。IEではラベルにカーソルをのせたとき、結び付けられたコントロールも視覚的に反応するようになっていたのです。
ラベル自体の見た目に何らかの変更が起こるわけではないため、ラベルとコントロールが結びついていることがユーザーに伝わりづらいかもしれませんが、何も起こらないよりはユーザーの助けになるでしょう。
さて、すこし残念だったのが、FirefoxとOperaです。実はこの二つ、設定メニューにあるチェックボックスやラジオボタンでは、IEと同じ挙動をとるのです。設定で実現できているならば、Webページにおいても同じ動作をするようにして欲しいと思いました。
よりよいラベルのアイデア
できることであれば、ラベルにも視覚的なフィードバックが欲しいところです。
GUIに関する問題であることから、プラットフォーム側で対応がなされるのが理想ですが、スタイルシートなどを利用して、ホバー時は背景を変更するなどの工夫を行ってみるのもいいかもしれません。
フォームのユーザビリティは、まだまだ向上できるように感じています。label要素を記述するといった基本的な対応に加えて、よりよいユーザー体験を提供できるような取り組みを行う必要があるでしょう。
コメント
コメントする
この記事のトラックバックURL:
http://standards.mitsue.co.jp/cgi-bin/mt/mt-tb.cgi/332
