WinIE で label の内容の img はクリックしても対応するフォーム要素がフォーカスしない。

しないんです。びっくりした。困った。初めて知った。こないだアクセシビリティ認定アドバイザを取得した私は俄に増長し、社内で勝手に一人「アクセシビリティ番長」を名乗り、あれもだめこれもだめと駄目出しをして悦に入っていたわけですが、ある同僚の方にこの問題の速やかな解決を求められ、数日でメッキが剥がれる。

<label for="otokoRadio"><img src="otoko.gif" width="40" height="15" alt="男性"></label>
<input type="radio" name="sekkusu" value="男性" id="otokoRadio">

これ、WinIE だとクリックしてもフォーカスしないです。何故…。

ホワ〜イな〜ぜ〜に〜。

しょうがないので、画像を label の背景画像にして display:block; にして中身をテキストにして飛ばしちゃえばどうか、

label {
	display:block;
	background:transparent url("otoko.gif") no-repeat left top;
	width:40px;
	height:15px;
}
label span {
	position:absolute;
	width:100px;
	left:-500px;
}

===

<label for="otokoRadio"><span>男性</span></label>
<input type="radio" name="sekkusu" value="男性" id="otokoRadio">

と思って伝えたところ、なんとネスケ4対応。それもいわゆる「ネスケ4でも同じ見た目ね対応」

あるんだよなー…。まだなー…。金融系とか、食品系とか、もともと組織が官僚的なところはそういうことになるんですよねー…。
ちなみに上のは、スタイルを media="all" かなんかで隠せば、そのままネスケ4でテキストになって出るので緊急の場合は使える…、かもしれない…。

ところではてなの編集画面、いつになったら「ちょっとした更新」に label が付くのでしょうか!。僕は待っています!。

追記第一弾

悔しいのでその後色々調べる。そもそも labeldisplay:block; なら中身が画像だけでもフォーム要素は反応する。と思ったけどそうでもなかった。やはり画像の上でクリックすると駄目ふうだ。負けそう。

追記第二弾

さらに悔しいので「はまったらブラウザよりまず自分を疑え」というルールに則って、Eric Meyer兄貴の Definitive Guide のインライン要素の高さの計算の章を猛烈に読んでみるも、しっかり置き換え要素の本来の高さでインライン要素の高さは押し広げられると書いてある。横もしかりだと思う。

その他WinIEっぽい position:relative; とか臭いところもやってみましたが、完敗だ!。WinIE のバグと言うことにさせてください、ウェブの神様!。