原生 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` 强隐导致焦点丢失；使用原生方法。在移动端考虑视口安全区与滚动阻止策略。区分模态/非模态的交互语义与使用场景。