Switch
Demo 與 Accessibility Tree
Accessibility Tree
觀察對象：外層的開關群組。
元素目前不在無障礙樹中。
Accessibility Tree
觀察對象：第一個開關。
元素目前不在無障礙樹中。
鍵盤操作
| 按鍵 | 行為 |
|---|---|
| Space | 切換開與關。底層是原生 <input type=checkbox>，這個行為由平台提供，不需要自行綁定。 |
| Tab | 逐一移入每個開關。開關之間不是互斥選項，所以不像 Radio Group 那樣整組只佔一個停留點。 |
ARIA 屬性
| 屬性 | 值 | 用途 |
|---|---|---|
role | switch | 底層是 <input type=checkbox>，補上這個角色才會被唸成「開關，開啟」而不是「核取方塊，已勾選」。差別在於語意：開關改的是當下的狀態，核取方塊是待送出的選擇。 |
checked | true / false | 開關狀態。原生 checkbox 的勾選狀態存在 DOM property 上，瀏覽器直接把它映射進無障礙樹，不需要另外寫 aria-checked。若改用 <div role=switch> 實作，就得自己維護 aria-checked。 |
aria-pressed | （不使用） | 這是 Toggle Button 的屬性，不屬於 Switch。兩者都有開關的意思，但一個元素只能有一種角色 —— 同時標上會讓輔助科技唸出互相矛盾的狀態。 |
role（群組） | group | 多個開關構成一組時需要容器與名稱。這裡用 <fieldset> + <legend>，隱含角色就是 group，legend 直接成為它的無障礙名稱，不必自己接 aria-labelledby。 |
aria-describedby | 補充說明的 id | 「變更後立即生效」是整組共通的規則，所以掛在群組上而不是每個開關上。掛在個別開關會讓同一句話被唸三次。 |
aria-hidden | true | 軌道與滑塊是純視覺，狀態已由 checked 表達。原生 input 本身以 appearance-none 隱藏外觀，但仍留在無障礙樹與 Tab 順序裡。 |
WCAG 對應
- 等級 A1.3.1 資訊及關聯性
三個開關包在 <fieldset> 內，「它們是一組」這件事程式判斷得出來，不只靠視覺上的靠近。
- 等級 A2.1.1 鍵盤
空白鍵即可切換，不需要滑鼠。
- 等級 AA2.4.7 焦點可見
聚焦時軌道外圍出現橘色 focus ring。原生外觀被隱藏後，焦點樣式必須自己補回來。
- 等級 A3.2.2 輸入時
切換開關會立即改變設定，這正是 Switch 的語意；使用者從角色與標籤就能預期這件事。
- 等級 A4.1.2 名稱、角色、值
每個開關具備 switch 角色、來自 label 的名稱，以及反映開關狀態的值；群組本身也有名稱。
APG 規則
- 元件語意
開關在 accessibility tree 中呈現 switch 角色
Switch 元素在 accessibility tree 中的計算角色為 switch；若以 HTML input[type=checkbox] 實作 Switch，也會呈現 role=switch。
- 元件語意
開關具有無障礙名稱
開關的無障礙名稱來自其文字內容、aria-labelledby 或 aria-label。
- 元件語意
開關正確呈現開啟與關閉狀態
開啟的 Switch 呈現 aria-checked=true，關閉的 Switch 呈現 aria-checked=false；若以 checkbox 輸入元件實作 Switch，則以其 checked 狀態表示。
- 元件語意
開關群組具有無障礙名稱
若多個開關構成同一群組，使用有名稱的 role=group，或使用 fieldset 與 legend 標示群組。
- 頁面結構
開關或開關群組具有無障礙補充說明
若開關或開關群組有補充說明，對應元素的 aria-describedby 指向包含該補充說明的元素。
- 鍵盤操作
開關可用 Space 切換狀態
當焦點位於開關時，按 Space 會切換其狀態。
- 鍵盤操作選做
開關可用 Enter 切換狀態
當焦點位於開關時，按 Enter 會切換其狀態。
- 一致的識別、導覽與行為
開關切換狀態時標籤保持不變
Switch 在開啟與關閉狀態之間切換時，其標籤不會改變。