ラベルとフォーム・コントロールの関連付け（可視ラベルあり）　［フォーム］

フォーム・コントロールのラベルとなるテキストがある場合、<label>要素を用いてマークアップして、フォーム・コントロールと関連付けているか

解説

フォーム・コントロールにそのラベルとなるテキストがあるときは、見た目の配置だけでなく、そのテキストがフォーム・コントロールのラベルであることがマシンリーダブルになるように、<label>要素を用いて両者を関連付けます。

フォーム・コントロールには次のようなものがあります。

  • 各種テキストフィールド（<input type=”text”>、<input type=”password”>、<input type="email">など）
  • ラジオボタン（<input type=”radio”>）
  • チェックボックス（<input type=”checkbox”>）
  • テキストエリア（<textarea>）
  • セレクトメニュー（<select>）

多くの場合、これらのフォーム・コントロールが何を入力または選択するものであるかを示すラベルとなるテキストが、フォーム・コントロールのすぐ近くにあります。見た目には両社が隣接していることによって、そのテキストがフォーム・コントロールのラベルであることが見た目では示されています。

その場合、見た目の配置でそのことが分かるだけではなく、フォーム・コントロールのラベルとなるテキストであることをブラウザや支援技術などのユーザーエージェントが解釈できるように、HTMLのWebページでは<label>要素を用いてマークアップします。

そうすることによって、例えばスクリーンリーダーではフォーム・コントロールを読み上げるときにラベルとなるテキストを一緒に読み上げることができるほか、ラジオボタンやチェックボックスなどはラベルとなるテキストをクリックして選択することができるようになるため、マウスでの操作性も向上します。

事例 1. テキストフィールド

悪い例 1.


<p>名前［必須］</p>

<input type="text" required ...>

テキストフィールドのラベルがマークアップされていない。

良い例 1.


<label for="name" class="required">名前［必須］</label>

<input type="text" required id="name" ...>

<label>要素を用いて、ラベルとなるテキストをマークアップしている。

WCAG 2.0の達成基準

1.3.1　情報及び関係性（レベル A）
何らかの形で提示されている情報、構造、及び関係性は、プログラムによる解釈が可能である、又はテキストで提供されている。

WCAG 2.0「ガイドライン 1.3 適応可能」

参考