“对话”角色是弹出窗口的正确选择吗？

Question

WAI reference，MDN reference。

WAI说：

  

对话框是应用程序窗口，旨在中断   当前处理应用程序以便提示用户   输入信息或要求回复。

据我了解，显示对话框询问某些信息。其目的不是为了显示单独的部分。所以它适用于对话框包含“是/否”，“继续”按钮的情况。或者当表格存在时。

MDN说：

  

对话框角色用于标记基于DHTML的应用程序对话框或窗口将内容或用户界面与网页的其他分开应用程序或页面。在视觉上，对话框通常使用叠加层放置在页面内容的其余部分之上。

我从这句话得到的，你可以使用普通弹出窗口的对话框。

此外，Bootstrap4也像MDN一样思考。

谁是对的？什么是真正的目的dialog角色以及应该用于简单弹出窗口（分隔部分）（可能是“文档”）的角色？

Answer 1

是的，我认为对话框作为角色是弹出窗口的更好选择。但也要注意对话框内部内容的语义变化，例如你不能使用导航键来读取对话框内的内容，而是你必须按下Insert + Space键（桌面用户）。这是针对NVDA其他的像JAWS和Voice Over这样的屏幕阅读器读起来不错，我猜不用按任何特殊键。

Answer 2

还要注意<dialog> element可能是更好的选择，而不是<div role="dialog">。

  

HTML <dialog>元素表示对话框或其他交互式组件，例如检查器或窗口。

请注意其当前poor browser support。