フォーム・コントロールのラベル提供（可視ラベルなし）［フォーム］

フォーム・コントロールの要素（<input>、<select>など）にラベルとなるテキストが見た目に存在しない場合、title属性を用いてラベルを提供しているか

解説

フォーム・コントロールにそのラベルとなるテキストがないときは、title属性を用いてそのフォーム・コントロールを特定するラベルとなるテキストを提供します。

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

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

ラベルとなるテキストがある場合には<label>要素を用いてそのテキストをマークアップすることができますが、例えばサイト内検索のキーワードを入力するテキストフィールドや電話番号を入力するテキストフィールドが分割されている場合など、ラベルとなるテキストが見た目には存在していないこともあります。

その場合は、HTMLのWebページではtitle属性を用いて、ラベルとなるテキストを提供します。そうすることによって、例えばスクリーンリーダーではフォーム・コントロールを読み上げるときにラベルとなるテキストを一緒に読み上げることができるようになります。

なお、title属性で提供するラベルは、画面には表示されない不可視のラベルとなります。

事例 1. サイト内検索

悪い例 1.


<input type="text" ...>

テキストフィールドの<input type=”text”>にラベルとなるテキストが提供されていない。

良い例 1.


<input type="text" title="サイト内検索のキーワード" ...>

画面に<label>要素でマークアップできる可視ラベルがないため、title属性を用いて不可視のラベルを提供している。

WCAG 2.0の達成基準

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

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

参考