ARIA：radiogroup 角色

描述

Radio groups 是描述一組相關 radio 選項的集合。radiogroup 是一種 select 列表，一次只能選中一個條目或 radio。

使用 HTML 原生的 radio 按鈕 <input type="radio"> 時，透過為組中的每個 input radio 按鈕設定相同的 name 來對其進行分組。一旦一組同名的 input radio 按鈕建立，選中該組中的任何一個 input radio 按鈕都會自動取消選中同一組中當前已選中的任何 input radio 按鈕。雖然這會將 radio 按鈕關聯在一起，但要明確地將 radio 按鈕分組公開為 radiogroup，請設定 ARIA 角色。

建議使用同名的 HTML input radio 按鈕建立 radio 組，但是，如果必須使用 ARIA 角色和屬性而不是語義 HTML 表單控制元件，則自定義 radio 按鈕可以並且應該像原生 HTML radio input 按鈕一樣工作。

使用非語義元素作為 radio 按鈕時，您必須確保使用者一次只能從組中選擇一個 radio 按鈕。當組中的一個專案被選中時，將其 aria-checked 屬性設定為 true，則先前被選中的專案將變為未選中狀態，其 aria-checked 屬性變為 false。aria-checked 屬性設定在關聯的 radio 角色上，而不是設定在 radiogroup 本身。

某些 radiogroup 實現會以所有按鈕都處於未選中狀態來初始化該組。一旦 radiogroup 中的 radio 被選中，通常就無法返回到全未選中狀態。

radiogroup 必須具有可訪問的名稱，可以透過由 aria-labelledby 引用的可見標籤，或者透過使用 aria-label 指定的標籤。如果元素提供了有關 radio 組的附加資訊，則這些元素將由 radiogroup 元素透過 aria-describedby 屬性引用。

關聯的 WAI-ARIA 角色、狀態和屬性

radio 角色: radiogroup 中的一組可選中按鈕之一，其中一次只能選中一個按鈕。
aria-labelledby / aria-label: radiogroup 必須具有可訪問的名稱，可以透過由 aria-labelledby 引用的可見標籤，或者透過使用 aria-label 指定的標籤。
aria-describedby: 引用為 radiogroup 提供附加資訊的元素
aria-required: 指示組內的某個 radio 必須設定 aria-checked="true" 才能提交表單。required 狀態指定在 radiogroup 元素上，而不是在 radio 元素之一上，這與使用 HTML radio 按鈕不同，後者將 required 屬性直接設定在一個或多個 radio <input> 元素上。
aria-errormessage: 標識在 radiogroup 中出現錯誤時提供錯誤訊息的元素。在不相關時，該訊息應隱藏。

鍵盤互動

對於 radiogroup（而不是 toolbar）中的 radio 按鈕，必須支援以下鍵盤互動

Tab 和 Shift + Tab: 將焦點移入和移出 radiogroup。當焦點移入 radiogroup 時，如果某個 radio 按鈕已選中，則焦點會設定在已選中的按鈕上。如果沒有任何 radio 按鈕被選中，則焦點會設定在組中的第一個 radio 按鈕上。
空格: 如果當前聚焦的 radio 按鈕尚未選中，則選中它。
右箭頭鍵 和 下箭頭鍵: 將焦點移到組中的下一個 radio 按鈕，取消選中先前聚焦的按鈕，然後選中新聚焦的按鈕。如果焦點在最後一個按鈕上，焦點將移到第一個按鈕。
左箭頭鍵 和 上箭頭鍵: 將焦點移到組中的上一個 radio 按鈕，取消選中先前聚焦的按鈕，然後選中新聚焦的按鈕。如果焦點在第一個按鈕上，焦點將移到最後一個按鈕。

箭頭鍵用於在工具欄中的元素之間導航。當 radiogroup 巢狀在工具欄內時，使用者需要能夠在不更改選中哪個 radio 按鈕的情況下，在所有工具欄元素（包括 radio 按鈕）之間導航。因此，當使用箭頭鍵在 toolbar 中的 radiogroup 中導航時，選中的按鈕不會改變。相反，在工具欄內時，空格鍵 和 回車鍵 會選中當前聚焦的 radio 按鈕（如果尚未選中），而 Tab 鍵則將焦點移入和移出 toolbar。

<div role="radiogroup" aria-labelledby="question">
  <div id="question">Which is the best color?</div>
  <div id="radioGroup">
    <p>
      <span
        id="colorOption_0"
        tabindex="0"
        role="radio"
        aria-checked="false"
        aria-labelledby="purple"></span>
      <span id="purple">Purple</span>
    </p>
    <p>
      <span
        id="colorOption_1"
        tabindex="-1"
        role="radio"
        aria-checked="false"
        aria-labelledby="aubergine"></span>
      <span id="aubergine">Aubergine</span>
    </p>
    <p>
      <span
        id="colorOption_2"
        tabindex="-1"
        role="radio"
        aria-checked="false"
        aria-labelledby="magenta"></span>
      <span id="magenta">Magenta</span>
    </p>
    <p>
      <span
        id="colorOption_3"
        tabindex="-1"
        role="radio"
        aria-checked="false"
        aria-labelledby="all"></span>
      <span id="all">All of the above</span>
    </p>
  </div>
</div>

本應使用語義 HTML 來編寫此內容，而這不需要 CSS 或 JavaScript

html

<fieldset>
  <legend>Which is the best color?</legend>
  <p>
    <input name="colorOption" type="radio" id="purple" />
    <label for="purple">Purple</label>
  </p>
  <p>
    <input name="colorOption" type="radio" id="aubergine" />
    <label for="aubergine">Aubergine</label>
  </p>
  <p>
    <input name="colorOption" type="radio" id="magenta" />
    <label for="magenta">Magenta</label>
  </p>
  <p>
    <input name="colorOption" type="radio" id="all" />
    <label for="all">All of the above</label>
  </p>
</fieldset>

在此 <fieldset> 示例中，雖然 role="radiogroup" 不是必需的，但為了將此分組明確宣佈為 radiogroup，請包含 ARIA 角色。