Dialog
Demo 與 Accessibility Tree
Accessibility Tree
觀察對象：開啟中的對話框。 下列是操作之後會量到的值。
- Role
- dialog
- Status
- （無狀態）
- Name
- 刪除這筆紀錄？
- Description
- 刪除後無法復原，確定要繼續嗎？
鍵盤操作
| 按鍵 | 行為 |
|---|---|
| Enter / Space | 在觸發按鈕上開啟對話框。 |
| Tab | 在對話框內的可聚焦元素之間循環，不會跑到背景內容。 |
| Shift + Tab | 反向循環，同樣被限制在對話框內。 |
| Esc | 關閉對話框，焦點回到原本的觸發元素。 |
ARIA 屬性
| 屬性 | 值 | 用途 |
|---|---|---|
role | dialog | 由 <dialog> 元素隱含提供，不需另外書寫。 |
aria-modal | true | 由 showModal() 隱含提供，告訴輔助科技背景內容暫時不可用。 |
aria-labelledby | 標題元素的 id | 讓對話框的 accessible name 取自可見標題，兩者不會不一致。 |
aria-describedby | 說明元素的 id | 讓說明文字跟著名稱一起播報；少了它，那句警告只有往下瀏覽才讀得到。只適用於簡短說明 —— 若內容是需要逐項導覽的清單、表格或多段文字，不能用它一次關聯。 |
aria-label | 關閉 | 關閉鈕內只有圖示，需要文字名稱才有可用的按鈕標籤。 |
aria-hidden | true | 頂部橘色裝飾條與關閉鈕圖示都是純視覺，不應進入無障礙樹。 |
（結構） | 元素位置 | 操作對話框所需的所有元素都必須是 role=dialog 的子階層。放在對話框外的按鈕，輔助科技使用者到不了。 |
（結構） | 背景遮蔽 | 開啟時背景內容必須在視覺上被遮蔽或淡化，並且無法操作。這裡由 ::backdrop 的半透明深綠與模糊達成，不可操作則由 showModal() 保證。 |
（舊式） | aria-hidden=true | 在不支援 <dialog> 的環境改用舊式做法時，要在每個背景層元素上各自設定 aria-hidden=true，而且對話框本身絕不能落在任何 aria-hidden=true 元素的子階層裡 —— 否則整個對話框從無障礙樹上消失。 |
WCAG 對應
- 等級 A1.3.1 資訊與關聯性
標題以 aria-labelledby 與對話框關聯，而不是只在視覺上靠近。
- 等級 A2.1.1 鍵盤
開啟、操作、關閉全程可用鍵盤完成，不依賴滑鼠點擊遮罩。
- 等級 A2.1.2 沒有鍵盤陷阱
焦點雖然被限制在對話框內，但 Esc 一定能離開，不構成陷阱。
- 等級 A2.4.3 焦點順序
開啟時焦點進入對話框，關閉時回到觸發它的按鈕。
- 等級 AA2.4.7 焦點可見
對話框內每個可聚焦元素都有橘色 focus ring。
- 等級 A4.1.2 名稱、角色、值
role=dialog、accessible name、aria-modal 皆由平台或明寫屬性提供。
APG 規則
- 元件語意
對話框容器具有 dialog 角色
對話框的容器須設定 role=dialog。
- 頁面結構
操作對話框所需的元素須位於 role=dialog 之內
操作對話框所需的所有元素，都須是 role=dialog 元素的子階層元素。
- 元件語意
對話框須設定 aria-modal=true
對話框的容器須設定 aria-modal=true。
- 焦點管理
對話框開啟時須阻止操作背景內容
對話框開啟時，應用程式須防止使用者操作對話框外的內容。
- 焦點管理
對話框開啟時須在視覺上遮蔽背景內容
對話框開啟時，對話框外的背景內容在視覺上須被遮蔽或淡化。
- 元件語意
對話框須具有無障礙名稱
對話框須以 aria-labelledby 關聯可見標題，或提供 aria-label 作為無障礙名稱。
- 元件語意選做
僅在說明簡短時才使用 aria-describedby
對話框若設定 aria-describedby，該屬性須指向說明用途或訊息的內容；若該內容是需要逐項導覽的清單、表格或多段文字，則不得使用 aria-describedby 一次關聯。
- 元件語意選做
舊式 aria-hidden 須隱藏停用的背景但不得隱藏對話框
若使用舊式 aria-hidden 對輔助科技隱藏停用的背景內容，須在每個包含該背景層的元素上設定 aria-hidden=true，且對話框元素不得位於任何 aria-hidden=true 元素的子階層中。
- 焦點管理
開啟對話框時焦點須移至內部適當位置
對話框開啟時，焦點須移至框內符合內容與任務的位置：內容較長或結構複雜時，移至內容起始的靜態元素；任務不可逆時，移至影響最小的操作；單純提供資訊或繼續流程時，移至最可能使用的控制元件。
- 焦點管理
Tab 焦點只會在對話框中循環
按下 Tab 鍵時，焦點僅能在對話框內移至下一個可透過 Tab 鍵到達的元素；若焦點位於最後一個元素時，則須移回第一個元素。
- 焦點管理
Shift+Tab 焦點只會在對話框中循環
按下 Shift+Tab 鍵時，焦點僅能在對話框內移至上一個可透過 Tab 鍵到達的元素；若焦點位於第一個元素時，則須移至最後一個元素。
- 焦點管理選做
對話框不得使用正數 tabindex
對話框不得以大於 0 的 tabindex 值控制其 Tab 順序。
- 鍵盤操作
Esc 鍵可關閉對話框
按下 Esc 鍵須關閉對話框。
- 焦點管理
關閉對話框後焦點須回到合理位置
關閉對話框後，焦點須回到原觸發元素；若該元素已不存在，或流程另有更合理的位置，則移至能提供合理流程的其他元素。
- 鍵盤操作選做
對話框須提供可見且可透過 Tab 到達的關閉按鈕
對話框的 Tab 鍵順序中，須包含可見的關閉按鈕，例如關閉或取消。