ラジオグループ

ラジオグループとは？

ラジオボタンは、いくつかの選択肢から1つだけを選ぶ UI です。 支払い方法、サイズ、配送オプションなど「どれか1つに決めたい」場面で使います。 これらをまとめた一式をラジオグループと呼びます。

チェックボックスとの違いは「複数選べる（チェックボックス）」か「1つだけ（ラジオ）」か。 この「1つだけ」というルールと、グループとしての名前を、目で見えない人にも伝えるのがポイントです。

なぜアクセシビリティが大事なの？

• キーボードだけで操作する人。ネイティブのラジオは Tab でグループに入り、↑↓←→ で選択肢を移動しながら同時に選択できます。<div> 製だと矢印キーが効かず、操作が成立しません。
• スクリーンリーダーを使う人。「お支払い方法, クレジットカード, ラジオボタン, 選択済み, 3個中1個目」 のようにグループ名・役割・選択状態・位置が読み上げられます。<div> では、そもそも選択肢のかたまりだと分かりません。

最短ルートは同じ name のネイティブラジオを <fieldset> +<legend> でまとめることです。

ライブデモ（推奨実装）

支払い方法を1つ選ぶラジオグループです。マウスを使わず、Tab でグループに入ってから矢印キーで操作してみてください。

キーボード操作

必要な WAI-ARIA / ロール

ネイティブ要素なら、ほぼ ARIA を書かずに成立します。

実装：推奨パターン（Good）

マークアップ:

<fieldset>
  <legend>お支払い方法</legend>

  <!-- 同じ name でグループ化。矢印キーで移動＆選択がネイティブで動く -->
  <label>
    <input type="radio" name="pay" value="card" checked> クレジットカード
  </label>
  <label>
    <input type="radio" name="pay" value="bank"> 銀行振込
  </label>
  <label>
    <input type="radio" name="pay" value="cod"> 代金引換
  </label>
</fieldset>

スクリプト:

// JS は不要。
// 同じ name でまとめれば「1つだけ選択」「矢印キーで移動＆選択」
// 「Tab でグループに入る」がすべてブラウザの標準動作で得られる。

アンチパターン（Bad）

下は <div> で作った「ラジオ風」です。マウスのクリックでは選べますが、キーボードの矢印キーは効かず、Tab でも止まりません。グループ名も「1つだけ選択」という意味も支援技術へ伝わりません。

<!-- ❌ アンチパターン：div で作った"ラジオ風" -->
<div class="radio-list">
  <!-- role も name もなく、矢印キーでも動かない。グループ名もない -->
  <div class="radio" onclick="select(this)">クレジットカード</div>
  <div class="radio" onclick="select(this)">銀行振込</div>
  <div class="radio" onclick="select(this)">代金引換</div>
</div>

実装チェックリスト

• 各選択肢は <input type="radio"> である
• グループ内のラジオは同じ name を共有している
• <label> と関連付いている（内包 or for/id）
• <fieldset> + <legend> でグループ名を与えている
• Tab でグループに入り、矢印キーで移動＆選択できる
• フォーカスが見える（フォーカスリングを消していない）
• 自作する場合のみ role="radiogroup"/role="radio"/aria-checked/ロービングタブインデックスを実装

原文（英語）:Radio Group Pattern — W3C APG（新しいタブで開きます）