Alert Dialog
Demo 與 Accessibility Tree
Accessibility Tree
觀察對象：開啟中的警示對話框。 下列是操作之後會量到的值。
- Role
- alertdialog
- Status
- （無狀態）
- Name
- 確定要刪除帳號嗎？
- Description
- 刪除後所有資料將立即永久移除，無法復原。
鍵盤操作
| 按鍵 | 行為 |
|---|---|
| Enter / Space | 在觸發按鈕上開啟警示對話框。 |
| Tab | 在對話框內的控制元件之間循環，不會跑到背景內容。 |
| Shift + Tab | 反向循環，同樣被限制在對話框內。 |
| Esc | 關閉對話框，焦點回到原本的觸發元素。警示對話框也必須能用 Esc 離開 —— 它要求回應，但不能把人困住。 |
ARIA 屬性
| 屬性 | 值 | 用途 |
|---|---|---|
role | alertdialog | 與 dialog 的差別：輔助科技把它當成警示來處理，開啟時會連同 aria-describedby 的內容一起播報，而不是只唸出標題。用在內容本身就是警告或錯誤、且需要立即回應的時候。 |
aria-modal | true | 明寫而非依賴 showModal() 的隱含值。APG 對警示對話框要求明確設定 —— 隱含值在 DOM 上看不到，用檢查工具的人會以為漏了。 |
aria-labelledby | 標題元素的 id | 名稱取自可見標題，看到的和聽到的是同一份文字。 |
aria-describedby | 警示訊息的 id | 這裡是必填，不像一般 Dialog 可有可無 —— 警示訊息就是這個元件存在的理由，不關聯起來「警示」兩個字就沒有內容。 |
（焦點） | 影響最小的控制元件 | 開啟時焦點落在「取消」而非「永久刪除」。破壞性動作旁邊若預選了破壞性按鈕，一個 Enter 就回不來了。 |
（舊式） | aria-hidden=true | 在不支援 <dialog> 的環境改用舊式做法時，要在每個背景層元素上各自設定，而且警示對話框絕不能落在任何 aria-hidden=true 元素的子階層裡。 |
aria-hidden | true | 頂部紅色裝飾條是純視覺，不應進入無障礙樹。 |
WCAG 對應
- 等級 A1.3.1 資訊與關聯性
標題與訊息分別以 aria-labelledby 與 aria-describedby 關聯，不是只靠視覺上的前後排列。
- 等級 A2.1.2 沒有鍵盤陷阱
焦點被限制在對話框內，但 Esc 一定能離開。要求回應不等於可以把人困住。
- 等級 A2.4.3 焦點順序
開啟時焦點進入對話框並落在影響最小的控制元件上，關閉時回到觸發它的按鈕。
- 等級 AA3.3.4 錯誤預防
不可逆的動作要可以復原、可以檢查、或可以確認。警示對話框正是「確認」這一條路 —— 而預設焦點放在取消鈕上，是讓確認真的成為一個決定而不是慣性。
- 等級 A4.1.2 名稱、角色、值
role=alertdialog、名稱、說明、aria-modal 四者齊備。
APG 規則
- 元件語意
警示對話框具有 alertdialog 角色語意
包含警示訊息與所有按鈕的容器，須指定 role=alertdialog 。
- 元件語意
警示對話框開啟時具有 modal 語意
警示對話框的容器須設定 aria-modal=true。
- 焦點管理
警示對話框開啟時會遮擋背景內容
警示對話框開啟時，對話框外的背景內容在視覺上被遮蔽或淡化。
- 元件語意
警示對話框具有無障礙名稱
警示對話框須以 aria-labelledby 關聯可見標題；若無可見標題，則須設定 aria-label
- 元件語意
警示對話框具有警示訊息提供的無障礙補充說明
警示對話框須以 aria-describedby 關聯警示訊息內容，以提供無障礙說明
- 元件語意選做
使用舊式 aria-hidden 時，應隱藏背景內容並保留警示對話框
若使用舊式 aria-hidden 對輔助科技隱藏停用的背景，需將背景區塊皆設定 aria-hidden=true，且警示對話框絕不可位於任何 aria-hidden=true 元素的子階層中。
- 焦點管理
警示對話框開啟時無法操作背景區域
警示對話框開啟時，程式會阻止所有使用者操作對話框外的內容。
- 焦點管理
警示對話框開啟時，焦點移入其中
開啟警示對話框時，焦點需移至內部合適的元素；例如執行不可逆操作時，應優先聚焦於影響最小的控制元件或最常使用的控制元件。
- 焦點管理
警示對話框開啟時，Tab 焦點限制在對話框中
Tab 鍵與 Shift+Tab 鍵僅能在對話框內的可聚焦元件間切換，且會在首尾元件間循環
- 鍵盤操作
按下 Esc 鍵可關閉警示對話框
按下 Esc 鍵關閉警示對話框
- 焦點管理
關閉警示對話框後需恢復到原先的焦點位置
關閉警示對話框後，焦點回到原觸發元素；若該元素已不存在，或有更符合操作流程的位置，則移至該新元素。
- 鍵盤操作
警示對話框的互動元件可正常操作
警示對話框提供可操作的控制元件，讓使用者回應重要訊息或確認要求。