チェックボックス／ラジオボタン

デフォルトUIの問題点

チェックボックス／ラジオボタンのデフォルトUIにおける一番の問題点は、「クリッカブル領域が小さすぎる」という点である。PCブラウザ環境でマウスを使っているユーザーであれば小さなチェックボックス／ラジオボタンをピンポイントでクリックすることも可能だが、指でタップするタッチデバイスユーザーにとっては小さなボタンを正確にタップするのは少々骨が折れる。

label要素を適切に使用する

デフォルトUIの問題点を解決するために真っ先に行うべきことは、label要素で適切に選択肢とそのラベルをグルーピングすることである。実装方法は、以下の2通りある。

  1. チェックボックス／ラジオボタンのinput要素とラベルテキストをlabel要素で囲む方法
    ⇒label要素の範囲全体がクリック反応領域となり、ラベルテキストをクリックしても正しくチェックボックス／ラジオボタンが選択されるようになる
  2. チェックボックス／ラジオボタンに隣接するラベルテキストのみをlabel要素で囲み、for属性で関連するinput部品のid属性と紐付ける方法
    ⇒label要素で囲まれたラベルテキストはクリック反応領域となるので、全体をlabel要素で囲んだ時と同様にラベルをクリックするとチェックボックス／ラジオボタンが選択されるようになる
【label要素で囲む】
<label><input type="checkbox" name="check" value="同意する">同意する</label>

【for属性で紐付ける】
<div class="inputField">
　<input type="radio" name="gender" id="male" value="男"><label for="male">男</label>
　<input type="radio" name="gender" id="female" value="女"><label for="female">女</label>
　<input type="radio" name="gender" id="other" value="その他"><label for="other">その他</label>
</div>

CSSで装飾する際の注意点

CSSでチェックボックス／ラジオボタンを装飾するといった場合、基本的に本来のinput要素は画面上から隠し、隣接する要素に指定したCSSで選択／非選択時の装飾を行う手法を取る。
この時、画面表示上は不要となるinput要素を隠すためにdisplay: noneしてしまうと、キーボード操作が全くできなくなってしまい、アクセシビリティが低下してしまう。

CSSで装飾する際の望ましい実装方法

チェックボックス／ラジオボタンはdisplay: noneするかわりにopacity: 0で透明にした上でposition: absoluteでデフォルトのレイアウト配置から切り離してしまうと良い。こうすることで、キーボード操作で移動／選択が可能となる。
また、キーボードで移動できていても、それが見た目で分からなければユーザーは戸惑ってしまうため、同時にフォーカスが当たっていることが視覚的にも分かりやすいよう、:focus疑似クラスに適切なスタイルを設定しておくことも重要。

inserted by FC2 system