当您使用 Esc 键退出 Web 浏览器中的某些内容时，例如模态对话框，焦点在哪里？

Question

在大多数情况下，似乎没有任何视觉指示，这对于依赖键盘的用户来说一定是困难的。

这似乎是一个非常简单的问题，但我已经在互联网上搜索并找不到答案。 我的第一个想法是使用 Firefox 的开发人员工具使用*some element*:focus {outline: 2px solid red;}创建视觉指示*some element*:focus {outline: 2px solid red;}但当然你需要知道哪个元素正在接收焦点才能工作，所以我尝试了通用选择器*:focus {outline:2px solid red;}但这没有用。

那么，任何人都可以回答看似简单的问题，即什么元素正在获得关注……对于额外的荣誉，任何人都可以提供一个代码片段，让我真正了解正在发生的事情吗？

Answer 1

在模态对话框的情况下，焦点应该回到框出现之前的位置。

例如，如果对话框在单击按钮时出现，则在对话框关闭时焦点应返回到该按钮，无论它是如何关闭的（鼠标单击或在关闭按钮或退出键上输入）。

最容易通过键盘访问的应用程序和网站是那些您始终知道焦点所在的应用程序和网站。 必须禁用模糊功能； 它不应该存在。

Answer 2

这取决于关闭对话框后焦点所在的实现。

但是， 键盘交互的WAI-ARIA 最佳实践在注释中声明了以下对话框：

当对话框关闭时，焦点返回到调用对话框的元素 […]

换句话说，打开对话框的链接或按钮被聚焦。

我检查了 Firefox 和 Chrome 中 HTML <dialog>元素的本机实现。

铬78：由退出键的手段离开对话后，重点是在背面集<body>

Firefox 71：尚未实现任何焦点逻辑。 焦点不限于对话框，也不会在对话框关闭后放在其他任何地方。

对于所有其他 UI 库，有不同的方式来实现对话框，这将导致在关闭后聚焦不同的元素：

1 条件渲染：如果不可见，DOM 中甚至不存在对话框 2 通过 HTML hidden=true或 CSS 隐藏对话框仅display: none

如果 1 焦点将设置在 Chrome 和 Firefox 中的<body>上。

在第 2 种情况下，两个浏览器都将焦点放在（现在隐藏的）模态内的元素上。

如果可访问性是一个问题，对不同图书馆的评估应该考虑到这一点。