28日目：フォーム要素にラベルをつける
Web のフォームが使いにくすぎてヤキモキしたことってない？例えば普通の GUI アプリケーションだったら、チェックボックスのラベル内のどこをクリックしたって、チェックをつけたり外したりできるよね。なのに Web 上だと、チェックボックスの四角自体しかクリックできないようになってる。これってウザいけど、まぁ致命的ではないか。でも、目が見えなかったら同じシチュエーションでももっと大変。シンプルなフォーム、コメントをつけるためのフォームとかでも、全部を見わたすことができないとなると、使いにくーいものになっちゃうんだ。（テーブルで同じような問題が生じるのは見たよね。ブログのカレンダーだって、全体を見ることさえできればラクに使えるけど、1コずつしか見えなったら使いづらい。）
フォームを使いやすくするのに役立つ HTML タグがあります。そのうちのひとつ、<label> タグについて説明しようと思う。他にもあるから、これ以外のタグについては「さらなる情報源（英語）」を参考にしてね。
<label> タグはフォームのラベルとフォーム要素を結びつけてくれるもの。フォーム要素はなんだっていい：テキストボックス、複数行書き込めるテキストエリア、チェックボックス、ラジオボタンなどなど、どれでも。ラベルを読むことによって、スクリーンリーダーは特定のインプット要素が何であるかの判断が的確にできるんだ。それに、<label> タグを使ってチェックボックス (<input type="checkbox">) とそのとなりのテキストを関連づければ、普通の GUI アプリケーションみたいな挙動になる。チェックをつけたり外したりが、テキストラベルのどこをクリックしてもできるようになるよ。
誰がトクする？
- ジャッキーの役に立つ。タブを使ってフォーム内を移動してると、JAWS は（
nameプロパティーを使って）各要素名を読み上げるんだけど、これだと意味不明のことがある。これに対して、フォーム要素にラベルが使われてれば、JAWS はそっちのテキストを読み上げてくれる。"テキスト：お名前。" (TAB) "テキスト：メールアドレス。" (TAB) "テキスト：自分のホームページのURL。" (TAB) "テキストエリア： コメント。" って感じ。 - リリアンも喜ぶ。フォーム要素がラベルづけされちゃえば、チェックボックスの横にならんだテキストのどこをクリックしてもチェックのつけ外しができる。マウスでつけ外しするのに苦労しないし、リリアンみたいに視力が良くない人には、クリックできる範囲が広ければ広いほど助かるんだ。
- ビルにもって言いたいとこだけど、この時点ではまだ言えない。ビルはキーボードでほとんどナビゲーションしてる。ってことは TAB を使ってるってこと。フォームの中のチェックボックスにタブで移動したら、Mozilla はラベル全体をフォーカスされてるって印の四角で囲うべきなんだけど、チェックボックスだけしか囲ってくれない。(Internet Explorer はちゃんと全体を囲ってくれる。あのネスケ 4 でさえできてるのに。Mozilla 君め。)
どうしたらいい？: Movable Type
Movable Type では、コメントリストテンプレート (Comment Listing Template) に変更を加える。終わりのほうに、こんな要素が入ったフォームがあるはず：
お名前：<br />
<input name="author" /><br /><br />
メールアドレス：<br />
<input name="email" /><br /><br />
自分のホームページのURL：<br />
<input name="url" /><br /><br />
コメント：<br />
<textarea name="text" rows="10" cols="50"></textarea><br /><br />
<input type="checkbox" name="bakecookie" />Remember info?<br /><br />
個々のラベルが素っ裸のままだから、これを <label> タグでくくってあげよう。あと <label> タグはフォーム要素の name じゃなくて ID にかかるものだから、それぞれの <input> タグに ID 属性が要る。全部ひっくるめるとこうなる：
<label for="author">お名前：</label><br />
<input id="author" name="author" /><br /><br />
<label for="email">メールアドレス：</label><br />
<input id="email" name="email" /><br /><br />
<label for="url">自分のホームページのURL：</label><br />
<input id="url" name="url" /><br /><br />
<label for="text">コメント：</label><br />
<textarea id="text" name="text" rows="10" cols="50"></textarea><br /><br />
<input type="checkbox" id="bakecookie" name="bakecookie" /><label for="bakecookie">Remember info?</label><br /><br />
コメントプレビュー、コメントエラー、個々の投稿アーカイブ (Individual Entry Archive) のテンプレートにも同じ変更を加えとくの忘れないでね。
さらなる情報源（英語）
- WebAIM: アクセシブルなフォームを作るには。もっと複雑なフォームにしたいときには、他にも
<legend>とか<fieldset>みたいなアクセシビリティ関連のタグを付けたす必要があるかも。このチュートリアルでは、それらがどんなものでどう使ったらいいかを説明。 - W3C: HTML 文書でのフォーム：LABEL 要素について。