Radio Group
Demo 與 Accessibility Tree
Accessibility Tree
觀察對象：外層的單選群組。
元素目前不在無障礙樹中。
Accessibility Tree
觀察對象：目前被選取的那一個選項。
元素目前不在無障礙樹中。
鍵盤操作
| 按鍵 | 行為 |
|---|---|
| Tab | 整組移入或移出，只佔一個停留點。進入時焦點落在已選取的項目；沒有任何選取時落在第一個。 |
| ↑ / ← | 移到前一個選項並同時選取它，走到開頭會循環到最後一個。 |
| ↓ / → | 移到下一個選項並同時選取它，走到結尾會循環到第一個。 |
| Space | 選取焦點所在的項目，同時取消原本的選取。 |
ARIA 屬性
| 屬性 | 值 | 用途 |
|---|---|---|
role | radiogroup | 所有選項必須被它包住。fieldset 的隱含角色是 group 而不是 radiogroup，所以這裡明寫覆寫掉。 |
aria-labelledby | legend 的 id | 群組名稱。role 一旦被覆寫成 radiogroup，legend 的隱含命名對應就失效了，必須改用這個明確指向。 |
role | radio | 每個選項。用原生 input[type=radio] 即隱含此角色，同時免費取得方向鍵導覽與整組一個停留點。 |
aria-checked | true / false | 選取狀態。用原生 checked，瀏覽器會映射到無障礙樹 —— 有原生屬性就用原生的。 |
aria-describedby | 說明元素的 id | 補充說明可以掛在整組上（「離島地區僅提供標準宅配」），也可以掛在單一選項上（「加收 120 元」）。兩種層級的說法不一樣，不要混為一談。 |
WCAG 對應
- 等級 A1.3.1 資訊與關聯性
選項與群組的從屬關係、每個選項與它的標籤、說明與被說明者 —— 三種關係都以標記表達，不是靠排版。
- 等級 A2.1.1 鍵盤
方向鍵與 Space 即可完成選取。
- 等級 A2.4.3 焦點順序
整組只佔一個停留點。十個選項若各佔一個停留點，鍵盤使用者要按十次才能離開這一區。
- 等級 A3.3.2 標籤或說明
群組與每個選項都有可見標籤。
- 等級 A4.1.2 名稱、角色、值
群組角色為 radiogroup 且具名，每個選項角色為 radio 且具名，選取狀態進得了無障礙樹。
APG 規則
- 頁面結構
單選按鈕位於 role=radiogroup 內
所有單選按鈕須位於 role=radiogroup 內。
- 元件語意
每個單選按鈕具有 radio 角色語意
每個單選按鈕須具有 role=radio 或等效的原生 radio 角色語意。
- 元件語意
單選按鈕正確呈現選取狀態
已勾選的單選按鈕須為 aria-checked=true，每個未勾選的單選按鈕須為 aria-checked=false。
- 元件語意
每個單選按鈕具有無障礙名稱
每個單選按鈕能由文字內容、aria-labelledby 或 aria-label 提供無障礙名稱。
- 元件語意
單選群組具有無障礙名稱
單選群組須透過 aria-labelledby 或 aria-label 提供無障礙名稱。
- 頁面結構
單選按鈕群組或個別單選按鈕具有無障礙補充說明
若單選群組或個別單選按鈕有補充說明，相關元素的 aria-describedby 須指向包含該說明的元素。
- 焦點管理
Radio Group 可用 Tab 移入移出並設定正確起始焦點
在工具列以外的情況，Tab 與 Shift + Tab 可將焦點移入或移出單選群組。進入時，焦點落在已勾選的單選按鈕上；若無已勾選項目，則落在第一個單選按鈕上。
- 鍵盤操作
單選按鈕可用 Space 鍵選取焦點項目
在工具列以外的情況，若焦點所在的單選按鈕尚未勾選，按 Space 鍵可勾選它，同時取消同群組中原本已勾選的項目。
- 鍵盤操作
單選群組以方向鍵移動並更新選取項目
在工具列以外的情況，右方向鍵或下方向鍵移至並勾選下一個單選按鈕，左方向鍵或上方向鍵移至並勾選前一個，且導覽到群組邊界時會循環至另一端。