アクセシビリティに関する質問です

質問

アクセシビリティのチェックサイト、HAREL
http://harel.nttdata.co.jp/
にて、以下の問題点（警告）がクリアできません。
http://harel.nttdata.co.jp/guidelines/check1203.html
label要素を付けただけでは不足なのでしょうか？
自分のサイトではこのように記述しています
↓↓↓↓↓
<form method="get" action="http://（略）">
<dl>
<dt><label for="search" id="labelsearch">
<img src="http://（略）search.png" width="185" height="51" alt="検索" /></label></dt>
<dd><input type="text" tabindex="8" name="search" id="search" value="キーワード" size="" /></dd>
</dl>
</form>
↑↑↑↑↑

ちなみにHAREL自身をチェックしても同じ警告が出ます。
元々『曇り』マークなのでそれほど気にする必要もないのかもしれませんが、神経質な性格なので可能であればクリアしたいと思っています。
解決出来る知識をお持ちの方がいらっしゃいましたら是非お願いします。

回答No.2

神崎 渉瑠（@taloo）

HTML4.01/XHTMLの文法上は、<label>の外に関連付いたフォームフィールドを置いてもよいとなっていますが、
<label for="text1">ラベル</label> <input type="text" id="text1">

一部のブラウザは<label>の中にフォームフィールドがないと、ラベルとフォームフィールドの関連づけが行われないものもあります。
ただしすべてのブラウザがHTML4.01/XHTMLだけを仕様として動作しているわけではありませんので、
関連づけが行われないからブラウザのバグというわけではありません。
Lynxなどは、もともと<label>とフォームフィールドの関連づけという概念はありません。

可能であれば定義リストをはずして、<label>の中にフォームフィールドを入れた方が良いと思います。
<label for="search"><img src="" alt=""><input type="text" id="search" name="search"></label>
（一部省略）

該当のページの以下の項目、aをご参照ください。
「いずれか」となっていますが、一部のブラウザを考慮するならa、bともに必須です。

> 改善方法
> 1. フォームの構成部品と対応するラベルの両方を、以下のいずれかの方法で関連付ける
> a.フォームの構成部品と対応するラベルの両方を、label要素で囲うことで関連付ける
> b.フォームの構成部品にid属性で値を指定し、label要素にfor属性で同じ値を記述することで関連付ける。

意味合いが定義リストであれば、labelとフォームフィールドを分離させなければならないと思いますし、
テーブルを使用していると分離させる必要がある場合もありますので、絶対的ではありません。
<tr>
<th><label for="text1">ラベル</label></th>
<td><input type="text" id="text1" name="text1"></td>
</tr>

質問内容とは関係ありませんが、
虫眼鏡アイコンを「検索開始ボタン」として使っているブラウザ（やアプリケーション）がありますので、
使われているアイコンが虫眼鏡のマークであれば、
「虫眼鏡ボタン（アイコンのこと）を押してもフォームが送信されず、フォーカスが移動するだけなのは変ではないか」と思われないように、誤クリックへの配慮が必要かもしれません。

お礼

具体的な説明、ありがとうございました。
いただいた情報を基にもう少し自分でも勉強してみます。

回答No.1

suzuko

ご参考までに

参考URL：

http://www.tagindex.com/html_tag/form/label.html