ARIA：radiogroup 角色

無線電組是描述一組相關radio選項的集合。radiogroup 是一種select列表，在任何給定時間只能選擇一個條目或radio。

當使用 HTML 本機輸入單選按鈕，<input type="radio">時，當組中的每個輸入單選按鈕都具有相同的name時，這些單選按鈕將被分組。一旦建立了一組同名輸入單選按鈕，選擇該組中的任何輸入單選按鈕都會自動取消選擇該組中當前選中的任何輸入單選按鈕。雖然這會將單選按鈕關聯在一起，但要將單選按鈕組明確地公開為radiogroup，請設定 ARIA 角色。

建議使用同名 HTML 輸入單選按鈕建立無線電組，但是，如果您必須使用 ARIA 角色和屬性而不是語義 HTML 表單控制元件，則自定義radio按鈕可以並且應該像本機 HTML 單選輸入按鈕一樣工作。

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

一些radiogroup實現使用所有按鈕處於未選中狀態來初始化集合。一旦radiogroup中的radio被選中，通常不可能返回到所有未選中狀態。

radiogroup必須具有可訪問的名稱，方法是透過aria-labelledby引用的可見標籤或使用aria-label指定的標籤。如果元素提供了有關無線電組的其他資訊，則這些元素將透過aria-describedby屬性由radiogroup元素引用。

radio 角色

一組可選中按鈕中的一個，位於radiogroup中，其中在任何給定時間只能選中一個按鈕。

aria-labelledby / aria-label

radiogroup必須具有可訪問的名稱，方法是透過aria-labelledby引用的可見標籤或使用aria-label指定的標籤。

aria-describedby

對提供有關radiogroup的其他資訊的元素的引用

aria-required

指示在提交表單之前，組中的一個radio必須設定aria-checked="true"。必需狀態是在radiogroup元素上指定的，而不是在radio元素之一上指定的，這與使用 HTML 單選按鈕時不同，在 HTML 單選按鈕中，required屬性直接設定在一個或多個單選<input>元素上。

aria-errormessage

標識為radiogroup提供錯誤訊息的元素（如果有錯誤）。該訊息在不相關時應隱藏。

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

Tab 和 Shift + Tab

將焦點移入和移出radiogroup。當焦點移入radiogroup時，如果單選按鈕被選中，則焦點將設定在選中的按鈕上。如果沒有任何單選按鈕被選中，則焦點將設定在組中的第一個單選按鈕上。

空格

如果聚焦的單選按鈕尚未選中，則選中它。

右箭頭 和 下箭頭

將焦點移動到組中的下一個單選按鈕，取消選擇先前聚焦的按鈕，並選中新聚焦的按鈕。如果焦點位於最後一個按鈕上，則焦點將移動到第一個按鈕。

左箭頭 和 上箭頭

將焦點移動到組中的上一個單選按鈕，取消選擇先前聚焦的按鈕，並選中新聚焦的按鈕。如果焦點位於第一個按鈕上，則焦點將移動到最後一個按鈕。

使用方向鍵在工具欄元素之間導航。當一個radiogroup巢狀在工具欄內時，使用者需要能夠在所有工具欄元素（包括單選按鈕）之間導航，而無需更改選中的單選按鈕。因此，當使用方向鍵在toolbar中的radiogroup中導航時，選中的按鈕不會改變。相反，在toolbar內，空格鍵和回車鍵會選中獲得焦點的radio按鈕（如果該按鈕尚未選中），而Tab鍵則用於在toolbar中進出焦點。

radiogroup的使用者互動必須複製使用者進入一組同名 HTML 單選按鈕的使用者互動。必須捕獲 Tab 鍵、空格鍵和方向鍵的鍵盤事件。還必須捕獲單選元素及其關聯標籤上的點選事件。此外，必須管理焦點。

雖然通常情況下，離開一個獲得焦點的元素會將您帶到 DOM 順序中的下一個可聚焦元素，但使用方向鍵在單選按鈕組中導航會使您保持在該組中，當在組中最後一個單選按鈕上釋放右箭頭或下箭頭時，焦點會移動到第一個單選按鈕，當在組中第一個單選按鈕上釋放左箭頭或上箭頭時，焦點會移動到最後一個單選按鈕。管理漫遊tabindex是管理方向鍵事件的一種方法。

使用[aria-checked="true"]屬性選擇器來設定選中單選按鈕的選中狀態樣式。

使用 CSS :hover 和 :focus偽類來設定視覺鍵盤焦點和懸停樣式。焦點和懸停效果應同時包含單選按鈕和標籤，以便更容易感知正在選擇哪個選項，並指示點選標籤或按鈕都會啟用單選按鈕。

使用非語義 ARIA 角色而不是語義 HTML 的radiogroup的基本設定如下所示

<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

<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 角色。

• HTML <fieldset>元素
• HTML <input type="radio">單選按鈕元素
• ARIA radio角色
• aria-errormessage
• aria-invalid
• aria-readonly
• aria-required