フォームコントロールのラベル付け
ブラウザに表示されるものの中にテキスト以外の要素を入れてしまうとアクセシビリティという点では、難しくなります。WAI(Web Accessibility Initiative)のウェブコンテンツ・アクセシビリティガイドラインを読んだだけで嫌になりそうなこともありますが、その中から今回はフォームコントロールについて触れてみようと思います。
アプリケーションでも同様ですが、わたしたちは日々パソコンに触れているので、画面上にエディットコントロールなどが現れても何の為のコントロールかをそれまでの操作の前後関係や経験などで判断できます。しかしそういう経験が少ない頃やアプリケーションを初めて起動した時に、突然次のようなダイアログが表示されたとします。
さすがにこのようなことはないとは思いますが、なにを入力していいのか分かりませんね。そこで、そのコントロールが何の為のものかを示すために多くの人はラベルを貼り付けます。
これでエディットコントロールには自分の名前を入力すればいいということが分かります。これがラベル付けですが、さらにHTMLではコントロールとラベルを関連付けます。コントロールのID属性にコントロールを識別する名前を、Label要素のFor属性に関連するコントロールの名前(ID属性の値)を指定するだけです。
では、なぜこのようなことが必要なのでしょうか？例として次のようなフォームがあったとします。
注意)次のフォームは表示例です。ボタンを押してもなにもありません。
これを見てわたしたちはこれが使いやすかったWindows系OSを選択させるためのフォームで、「Windows 98、Windows Me、Windows 2000、Windows XP」の4つから選択でき、その他の場合は入力すると分かります。というのも、それぞれのコントロールがひとつずつ縦に並んでいるということ、選択したことを示す印のすぐ横にラベルがあること、エディットボックスにテキストが表示されていることが見える、からですね。
もしこれを読み上げるとすると「使いやすかったWindows系OSを選択してください。ラジオボタン、Windows 98、オン、ラジオボタン、Windows Me、ラジオボタン、Windows 2000、ラジオボタン、Windows XP、エディットボックス、ボタン、OK」と読み上げられるかもしれません(読み上げ方はソフトウェアによって変わってきます)。
この程度の選択ならその意味が予想できたり、特に重要ではなかったりするかもしれませんが、コントロールが数十個ある企業のアンケートなどで突然エディットのラベルがないとなるとそれだけで混乱します。また、コントロールのラベルは声を変えて読み上げるソフトウェアの場合に、ラベルが関連付けられていないため、そのコントロールにフォーカスがあっても正しく読み上げられない可能性もあります。
最初に出てきたラベルのないダイアログのように、ラベルがないだけでなにをしていいのかわからなくなります。「コントロールの横に付ける」ではなく「コントロールの意味を伝える」ものとしてきちんとラベルを付けましょう。
グループ化
まず、次のフォームを見てください。
注意)次のフォームは表示例です。選択してもなにもありません。
よく見かけるSelectですね。HTMLの要素の一部を用途別に並べたものですが、全ての要素を並べると探すのに苦労しそうです。では、次はどうでしょう？
注意)次のフォームは表示例です。選択してもなにもありません。
どうでしょうか？グループ毎に分けられて表示されましたか？一部のブラウザでは対応していないようなのでOperaでの表示例を画像でご覧ください。
この方が見やすく、利用者は探しやすいですよね。これはSelectの項目であるOption要素を項目別にOptGroup要素で分けただけです。たったそれだけで可読性はぐっと高まると思います。
先に取り上げたLabel要素の方はそれ自体を解釈してレンダリングするユーザーエージェントは少ないかもしれませんが、ないわけではありません。Label要素があるところでは、それがラベルであるときちんと読み上げるものもあります。OptGroup要素のほうは自分でもソースを修正しやすくなると思うので、ぜひやってみてください。