キーボードでラジオボタンを選択するにはどうすればいいですか？

キーボードでラジオボタンを選択するにはどうすればいいですか？

キーボードでラジオボタンを選択するにはどうすればいいですか？

ウェブフォームでよく使われる入力要素の一つに、ラジオボタンがあります。ラジオボタンは、複数の選択肢の中から一つだけを選択する場合に使われます。マウスを使ってクリックして選択するのが一般的ですが、キーボードのみでも操作することができます。

キーボード操作の方法

ラジオボタンをキーボードで選択するには、主に以下のキーを使います。

キー 動作
Tabキー フォーカスを次の要素に移動します。
Shift + Tabキー フォーカスを前の要素に移動します。
↑キー (上矢印キー) フォーカスを前のラジオボタンに移動します。
↓キー (下矢印キー) フォーカスを次のラジオボタンに移動します。
Spaceキー / Enterキー フォーカスされているラジオボタンを選択状態にします。

まず、Tabキーを押して、ラジオボタンがあるグループにフォーカスを移動します。すると、グループ内のいずれかのラジオボタンが選択状態、もしくはフォーカスされた状態になります。その後は、矢印キーを使って選択したいラジオボタンにフォーカスを移動し、SpaceキーまたはEnterキーを押して選択します。

HTMLでの実装例

以下は、ラジオボタンを使った簡単なHTMLの例です。

<form>
  <fieldset>
    <legend>好きな果物を選んでください</legend>
    <label>
      <input type="radio" name="fruit" value="apple">りんご
    </label>
    <label>
      <input type="radio" name="fruit" value="orange">みかん
    </label>
    <label>
      <input type="radio" name="fruit" value="banana">バナナ
    </label>
  </fieldset>
</form>

参考資料

よくある質問

Q1: ラジオボタンにキーボードでフォーカスを当てても選択状態になりません。

A1: フォーカスを当てた後、SpaceキーまたはEnterキーを押すことで選択状態になります。

Q2: 矢印キーでラジオボタン間を移動できません。

A2: ラジオボタンが同じグループに属しているか確認してください。異なるグループに属している場合は、Tabキーでグループ間を移動する必要があります。

Q3: JavaScriptでラジオボタンの選択状態を取得するにはどうすればいいですか？

A3: ラジオボタンのDOM要素を取得し、`checked`プロパティを参照することで選択状態を取得できます。

const selectedFruit = document.querySelector('input[name="fruit"]:checked').value;

その他の参考記事:jquery radio checked 取得