Checkbox
Demo 與 Accessibility Tree
每週最多一封，隨時可取消。
Accessibility Tree
觀察對象：外層的核取方塊群組。
元素目前不在無障礙樹中。
Accessibility Tree
觀察對象：「全部選取」這個三態核取方塊。
元素目前不在無障礙樹中。
鍵盤操作
| 按鍵 | 行為 |
|---|---|
| Space | 切換勾選狀態。 |
| Tab | 依序移到群組中的每一個核取方塊。 |
ARIA 屬性
| 屬性 | 值 | 用途 |
|---|---|---|
role | checkbox | 用原生 <input type=checkbox> 即隱含此角色，同時免費取得 Space 鍵、勾選狀態與 label 關聯。 |
（名稱） | <label> | 名稱來自關聯的 label。用 label 包住或 htmlFor 指向，點文字也能切換 —— 那同時把點擊範圍從 16px 的小方塊擴大到整行，是動作控制受限者的實質差別。 |
aria-checked | mixed | 第三態。部分勾選只存在於 DOM 的 indeterminate property，寫不進 HTML 屬性裡，所以要另外補這個值才進得了無障礙樹。 |
（結構） | fieldset + legend | 多個核取方塊構成一組時，群組要有名稱。「通知方式」這個標題若只是旁邊的一行字，螢幕閱讀器使用者聽到的就只是三個孤立的選項。 |
aria-describedby | 說明元素的 id | 補充說明可掛在單一核取方塊或整個群組上。 |
aria-invalid | true | 驗證失敗時標示。錯誤訊息本身用 aria-describedby 關聯。 |
WCAG 對應
- 等級 A1.3.1 資訊與關聯性
label 與控制項關聯、群組以 fieldset/legend 表達、說明以 aria-describedby 關聯 —— 三種關係都不能只靠視覺位置。
- 等級 A2.1.1 鍵盤
空白鍵即可切換。
- 等級 AA2.5.8 目標尺寸（最小）
方塊本身只有 16px，但 label 與它同屬一個點擊區域，實際可點範圍是整行。
- 等級 A3.3.2 標籤或說明
每個選項都有可見標籤，群組有可見的群組名稱。
- 等級 A4.1.2 名稱、角色、值
角色為 checkbox，名稱來自 label，勾選與部分勾選狀態都進得了無障礙樹。
APG 規則
- 元件語意
核取方塊具有 checkbox 角色語意
核取控制項具有 role=checkbox 或等效的原生核取方塊語意。
- 元件語意
核取方塊具有無障礙名稱
核取方塊的無障礙名稱來自其文字內容、aria-labelledby 或 aria-label。
- 元件語意
核取方塊正確呈現勾選與部分勾選狀態
核取方塊勾選時 aria-checked=true、未勾選時為 false；三態核取方塊部分勾選時為 mixed。
- 元件語意
核取方塊群組具有無障礙名稱
若多個核取方塊構成同一群組，role=group 的 aria-labelledby 指向可見群組標籤。
- 頁面結構
核取方塊或核取方塊群組具有無障礙補充說明
若核取方塊或核取方塊群組有補充說明，對應元素的 aria-describedby 指向包含該補充說明的元素。
- 鍵盤操作
核取方塊可用 Space 切換狀態
當焦點位於核取方塊時，按 Space，勾選狀態會切換。
- 元件語意
用來控制整組核取方塊的三態核取方塊會同步更新子項目。
若三態核取方塊用來控制一組選項，將其勾選會勾選全部子核取方塊，取消勾選會取消全部；若支援第三次切換，則會還原先前記住的部分勾選狀態。