H44: label要素を用いて、テキストのラベルとフォーム・コントロールを関連付ける

ユーザーエージェント及び支援技術によるサポート

HTML及びXHTML仕様書では、暗示的なラベルと明示的なラベルの両方を認めている。しかし、支援技術の一部は、暗示的なラベル（たとえば、<label>First name <input type="text" name="firstname"></label>）を正確に処理できない。【訳注：なお、暗示的なラベルとは、ラベルとフォーム・コントロールを単にlabel要素で囲んだだけのものである。一方、明示的なラベルとは、label要素のfor属性に、フォーム・コントロールのid属性値と同じ値を指定することで、両者を明確に関連付けたものである。】

JAWS 7.10の動作を、Windows XPのInternet Explorer 6.0とFirefox 1.5で検証した。テキストフィールドに付けたラベルは、明示的なラベルでも暗示的なラベルでも、バーチャルPCカーソルとフォーム読み上げモードの両方で読み上げられた。ただし、フォーム読み上げモードでは、チェックボックスとラジオボタンに付けた暗示的なラベルは読み上げられなかった。
Window-Eyes 5.5の動作を、Windows XPのInternet Explorer 6.0とFirefox 1.5で検証した。フォームフィールドの明示的なラベルは常に読み上げられたが、ブラウズONモードでは暗示的なラベルは読み上げられなかった。ただし、ブラウズOFFモードでコントロールからコントロールへと移動したときは、暗示的なラベルでも読み上げられた。

ユーザーエージェントは、title属性が指定してあるinput要素にマウスオーバーしたときに、ツールチップを表示するようである。支援技術はtitle属性を抽出し、多くのグラフィカルブラウザはtitle属性をツールチップで表示する。ただし、キーボード操作ではツールチップを開けないため、視力はあるがマウスではなくキーボードを使っている利用者は、現状ではツールチップの情報を利用できない恐れがある。

JAWSとWindow-Eyesでは、フォーム・コントロールがフォーカスを受けたとき、もしラベルが指定されていなければ、title属性を読み上げる。

JAWS 6.0以降では、label要素とtitle属性が異なるとき、その両方を読み上げるように設定できる。しかし、この設定方法に気づいているユーザーは非常に少ない。
Window-Eyes 5.5には、（title属性を含む）フォーカスされた項目の追加情報を読み上げるホットキー（ins+E）がある。

解説

この実装方法の目的は、フォーム・コントロールとラベルを明示的に関連付けるために、label要素を利用することである。ラベルは、label要素のfor属性によって特定のフォーム・コントロールと結びつけることができる。この場合、for属性値はフォーム・コントロールのid属性値と同じでなければならない。

id属性がname属性と同じ値で、両方とも指定しなければならない場合でも、そのidはそのウェブページ内で一意的なものとして、重複して使用してはならない。

この実装方法は、label要素が見えているかどうか、つまりCSSで非表示にしているかどうかに関わらず、達成基準 1.1.1、1.3.1、4.1.2を満たすことができる。しかし、達成基準 3.3.2では、label要素を入力フィールドの理解に役立てたい全ての利用者のために、見える状態にしておかなければならない、としている。

input要素のtype="checkbox"とtype="radio"では、label要素をその後に配置することに注意する。

注記 1：明示的なラベルを利用する要素は次の通りである：

input type="text"
input type="checkbox"
input type="radio"
input type="file"
input type="password"
textarea
select

注記 2：次の場合には、label要素は利用しない。これらの要素に対するラベルは、value属性（送信ボタン及びリセットボタン）、alt属性（画像ボタン）、又は要素それ自体の内容（汎用ボタン）を介して提供されるからである。

送信及びリセットボタン（input type="submit"又はinput type="reset"）
画像ボタン（input type="image"）
隠しフィールド（input type="hidden"）
スクリプトボタン（button要素又は<input type="button">）

事例

事例 1：テキスト入力フィールド

事例 2：チェックボックス

事例 3：ラジオボタンのグループ

関連するラジオボタンの小さなグループについて、簡単な説明が付けてあり、さらに個々の要素にラベルが付けてある。

注記：ラジオボタンの数が多く、それらの関連付けや操作説明を必要とする場合は、H71: Providing a description for groups of form controls using fieldset and legend elements の方法を考慮すべきである。

コード例：

 <h1>ドーナツ</h1>

<p>お好きなドーナツを選び、「ドーナツを購入」ボタンを
    押してください。</p>

<form action="http://example.com/donut" method="post">
<p>
  <input type="radio" name="flavor" id="choc" value="chocolate" />
    <label for="choc">チョコレート</label><br/>
  <input type="radio" name="flavor" id="cream" value="cream"/>
    <label for="cream">クリーム入り</label><br/>
  <input type="radio" name="flavor" id="honey" value="honey"/>
    <label for="honey">ハニーがけ</label><br/>
  <input type="submit" value="ドーナツを購入"/>
</p>
</form>

参考リソース

この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

チェックポイント

ウェブページ内のtype="text"、type="file"、type="password"を指定したinput要素、textarea要素、select要素全てについて：

input要素、textarea要素及びselect要素の前に、そのコントロールの目的が特定できるlabel要素がある。
label要素のfor属性値が、input要素、textarea要素及びselect要素のidと一致している。
label要素のラベルが視覚的に認識できる状態である。

ウェブページ内のtype="checkbox"及びtype="radio"を指定したinput要素全てについて：

input要素の後に、そのコントロールの目的が特定できるlabel要素があるか確認する。
label要素のfor属性が、input要素のid属性と一致している。
label要素のラベルが視覚的に認識できる状態である。

判定基準

1.及び2.を満たしている。達成基準 3.3.2に関しては、3.も満たしている。

注意：この実装方法が「達成基準を満たすことのできる実装方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの実装方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の実装方法によってその達成基準が満たされていることもありうる。