# 界面设计中 Alert Dialog 模式的无障碍实现指南
在构建需要用户确认的交互界面时，Alert Dialog（警报对话框）模式是常见组件。根据 W3C ARIA 作者实践指南（APG），正确实现该模式需兼顾键盘导航与屏幕阅读器支持。
## 角色与属性配置
首先，容器元素应使用 `alertdialog` 角色来标识其为确认对话框。为提供可访问的名称，需通过 `aria-labelledby` 引用标题元素；同时利用 `aria-describedby` 引用描述文本，确保用户立即知晓提示内容。此外，必须设置 `aria-modal="true"`，告知辅助技术背景内容不可交互。
## 焦点管理与防误操作
焦点应自动定位到对话框内的首个可聚焦元素，通常建议设为“否”（No）按钮。这一设计遵循最小破坏性原则，防止用户因误触而执行如“丢弃”等不可撤销的操作。当按钮处于禁用状态时，应使用 `aria-disabled` 属性而非 HTML 的 `disabled` 属性，以保持 Tab 序列的连续性，方便屏幕阅读器用户发现所有可用选项。
## 键盘支持规范
该模式需完整支持键盘操作：Tab 键在对话框内移动焦点至下一个元素，Shift+Tab 反向移动；当焦点位于最后一个元素时，按 Tab 应跳转回第一个元素。Escape 键用于关闭对话框。对于保存功能，可配合 Command+S（Mac）或 Control+S（Windows）快捷键。
## 语义化优先原则
始终遵循“无 ARIA 胜于坏 ARIA”的原则，优先使用语义化 HTML。尽管示例代码包含 JavaScript 与 CSS 源文件供参考，但在生产环境中使用前，务必结合具体辅助技术进行测试，以应对潜在的浏览器或设备支持差异。
> 注：本文内容基于 W3C 资料，更新于 2025 年 8 月 12 日。