labelタグを設定した領域が、iPhoneでタップしても反応しない件

フォームでは、ユーザーがクリック(タップ)しやすいように、labelタグを使用してinput要素を選択しやすくします。

<label><input type="radio" name="hogehoge" />これ</label>
<label><input type="radio" name="hogehoge" />それ</label>
<label><input type="radio" name="hogehoge" />あれ</label>

      • -



とくにラジオボタンチェックボックスでは重要。labelタグをつけてないと、ラジオボタンの丸い部分を狙ってクリックしなければいけないため、結構なストレスなのだ。特にアンケート等で入力項目の多いフォームだと、イライラしてページを閉じてしまうこともあるかもしれない。(実際、私はよくやる)
labelタグをつけることで、そこに含まれる要素全体がクリック領域になってinputタグにフォーカスできる。ユーザビリティの向上として重要かつ常套の手段。

ところが、iPhoneおよびiPadではlabelでかこった部分をタップしても反応しないという問題がある。この件は以下のようにCSSで対処できる。

label {
cursor:pointer;
}

ちなみに、label要素にonclick="" 属性を追記しても同様の結果が得られるようだ。
要するに、label要素がタップ(クリック)するための要素として認識されてないということらしい。