标准答案
- dialog 是 HTML 原生对话框元素，可以表示模态或非模态弹窗。
- showModal() 会打开模态弹窗，并让弹窗外内容处于不可交互状态。
- dialog 自带一些焦点和 ESC 关闭行为，但不能替代完整的交互设计。
- 使用时要提供清晰标题、关闭按钮、可访问名称、合理的初始焦点和关闭后的焦点恢复。
- 还要评估浏览器兼容、滚动锁定、动画、表单提交和框架组件库封装方式。
题目解析
这题不是只问“有没有原生弹窗”，而是问原生能力能覆盖多少，项目里还要补什么。
可访问性重点是用户能知道弹窗是什么、能用键盘操作、能关闭，并能回到打开前的位置。
代码示例
dialog 可以通过 showModal 打开，通过 close 关闭。
HTML
<button id="open">打开设置</button>
<dialog id="settings" aria-labelledby="settings-title">
<h2 id="settings-title">设置</h2>
<p>这里是设置内容。</p>
<button id="close">关闭</button>
</dialog>
<script>
settings.showModal()
close.addEventListener('click', () => settings.close())
</script>常见误区
- 认为用了 dialog 就不需要标题、关闭按钮和焦点管理。
- 只支持鼠标点击关闭，键盘用户无法顺利退出。
- 没有处理关闭后焦点回到触发按钮，导致键盘浏览位置丢失。