iPhoneに対してlabel要素を設定していも、選択エリアが広がりません。今回はその対応策について考えてみました。
例えば、フォームのラジオボタンやチェックボックスなどは、デバイスや画面サイズによっては操作しづらい事があります。そのような場合は、label要素で囲む事で、その囲まれたエリアをイベント領域として確保します。
例えば、以下のようなコードを用意してみました。
<input type="checkbox" />labelなしです<br /> <label><input type="checkbox" />labelありです</label>
そうすると、以下のような表示になります。
labelありだと、要素囲んだ「labelありです」の文字列の部分で、チェックのオン/オフができるので、操作性が上がりますね。
このように、フォームを組む際にユーザビリティとしてlabelを導入するのは、ここ最近は常識になっていますね。
しかし、iPhoneだと、このlabel要素が効きません。