フォームとアクセシビリティ

明示的なラベル付け

ラベルを付けるコントロール要素にid属性を加え、label要素にそのidを示すfor属性を加えます。label要素の内容がコントロールの説明（ラベル）になります。

<label for="uname">氏名：</label><br />
<input type="text" name="username" id="uname" />

この方法は曖昧さがなく、また一つのコントロールに複数のラベルをつける（複数のlabel要素がfor属性で同じidを参照する）こともできます。また、label要素とコントロールの間に他の要素があっても構いません。

フォームのコントロールのname属性はa要素タイプの場合と異なり、所属するフォームの中だけでの識別名で、id属性とは名前空間を共有しません（id属性は常に文書中で重複不可です）。そのため、この例ではname属性とid属性には異なる値を使っています。

暗黙的なラベル付け

コントロールをlabel要素で囲むことで、ラベルの対応関係を暗黙的に示します。

（例）<label>氏名：<input type="text" name="username" /></label>

label要素の内容には、一つのコントロールしか含めることができません。いちいちfor属性やid属性を示す必要がなく簡単ですが、フォームのコントロールをtable要素を使って整列しているような場合には用いることが来ません（label要素の内容モデルはインライン要素に限られます）。

label要素のメリット

label要素を使うと、グラフィカルブラウザでも、ラベル文字列をクリックすることでコントロールが反応する（ラジオボタンが選択されたり、テキストボックスが入力状態になる）というメリットがあります。小さなラジオボタンをクリックするのは、環境や利用者の条件によっては難しいこともあるため、クリックできる範囲が広がることで操作が容易になるわけです。

なお、IEのバージョン5/6は、明示的なlabel要素にのみ対応しているようです。お使いのブラウザで、次のラジオボタンの“ラベル部分”を選択してみてください。

TAB選択の順序

TABキーなどによる選択は、通常、選択可能項目を文書の先頭から順番に移動していくことになります。必要に応じて、この選択順序を変更できると都合がよいことがあります。このためにHTML4で用意されているのがtabindex属性です。

tabindexはひとつの文書全体での選択順序を指定するもので、0〜32767の範囲の任意の数字を割り当てます。番号が小さいものから順番に選択されます。番号が0もしくはtabindexを割り当てていない要素は、そのあとで順次選択対象になります。

tabindexはinput, select, textareaといったフォームコントロールの他に、a要素やobject, button, area要素にも割り当てることができます。

<form action="...">
 <table>
  <tr>
   <td>住所：<input type="text" name="addr" tabindex="1" /></td>
   <td><a href="dummy.html" tabindex="6">住所記入の注意</a>
  </tr>
  <tr>
   <td>氏名：<input type="text" name="name" tabindex="2" /></td>
   <td><a href="dummy.html" tabindex="7">氏名記入の注意</a>
  </tr>
  <tr>
   <td>年齢：<input type="text" name="age" tabindex="3" /></td>
   <td><a href="dummy.html" tabindex="8">年齢記入の注意</a>
  </tr>
 </table>
</form>

上記のようなテーブルを使っている場合、TABキーを押していくと、入力コントロールと注意書きのアンカーが交互に選択されますが、tabindexを指定することで、入力コントロールを先に順番に選択させることができます。ここでは住所入力欄のtabindexが1になっているので、ほかに同じtabindexを持つ要素がなければ、フォームが文書の最後にあっても、文書を開いてTABキーを1回押すだけでこの項目にジャンプします。

ただし、tabindexをサポートしないブラウザではこの指定は意味を持ちませんし、そもそもTABキーではアンカー要素が選択されないブラウザもあります。

キーボードショートカット

TABキーで順番に選択する代わりに、特定の文字キーとショートカットキーの組合せで直接その要素を選択（あるいは実行）させる方法がHTML 4のaccesskey属性です。この属性が使えるのは、a, area, button, input, label, legend, textareaの各要素です。

<input type="radio" name="area" value="tokyo" accesskey="t" /> 東京地区[T]
<input type="radio" name="area" value="osaka" accesskey="k" /> 京阪神地区[K]
<input type="radio" name="area" value="nagoya" accesskey="c" /> 中京地区[C]
<input type="radio" name="area" value="other" accesskey="o" /> その他[O]

たとえばラジオボタン型inputにaccesskeyを割り当てると、ショートカットキーでボタンを選択することができます。フォームのコントロールなら「選択」が一般的な動作ですが、a要素の場合は要素を選択するだけではなく、そのリンク先までジャンプするブラウザもあります^*。

accesskeyを働かせる「ショートカットキー」は、機種やブラウザによって異なります。たとえばWindows用のIEならAltキーと、Macintosh用のIEならControlキーとの組合せでショートカットが働きますが、同じMacintosh用ブラウザでもiCabなら単に割り当てられた文字キーのみでaccesskeyが働きます。

上はiCabで表示したラジオボタンの一部分です。このように、accesskeyを割り当てた要素の隣に小さくその文字を表示してくれるブラウザもありますが、そこまで親切ではないブラウザの場合は、上記の例のようにラベルにアクセスキーを記述しておかないと分からないでしょう。このあたりはまだ実装が未熟な部分で、今後スタイルシートとの組合せなどで使いやすくなっていくことが期待されます。