原生 dialog 对话框体系与可访问性实践

原生 dialog 对话框体系与可访问性实践概述`<dialog>` 提供模态与非模态对话能力，支持 `::backdrop` 遮罩与焦点管理，是构建可访问对话框的首选。核心概念与参数`show()` 与 `showModal()` 打开对话框；`close()` 关闭。事件：`cancel`、`close`；焦点返回触发点。特性检测：`'HTMLDialogElement' in window`。实践示例<button onclick="dlg.showModal()">打开</button> <dialog id="dlg"> <form method="dialog"> <p>确认操作？</p> <button value="cancel">取消</button> <button value="ok">确定</button> </form> </dialog> <style> dialog::backdrop { background: rgba(0,0,0,.25); } dialog { border: none; border-radius: 12px; padding: 16px; } }</style> <script> const dlg = document.getElementById('dlg'); if (!('HTMLDialogElement' in window)) { // 降级：使用 Popover 或绝对定位容器 console.warn('dialog not supported, fallback to popover/absolute'); } </script> 验证方法A11y：Esc 关闭、焦点在对话框内循环、关闭后返回触发按钮。一致性：与 Popover/菜单统一遮罩与层级策略。键盘可达：Tab/Shift+Tab 行为符合预期。注意事项避免通过 `display: none` 强隐导致焦点丢失；使用原生方法。在移动端考虑视口安全区与滚动阻止策略。区分模态/非模态的交互语义与使用场景。