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要素を記述するといった基本的な対応に加えて、よりよいユーザー体験を提供できるような取り組みを行う必要があるでしょう。