Html 当您使用escape键退出web浏览器中的某些内容（如模式对话框）时，焦点在哪里？

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

这似乎是一个非常简单的问题，但我在互联网上搜索过，却找不到答案。我的第一个想法是使用Firefox的开发工具创建一个可视化的指示，使用

*一些元素*：focus{outline:2px solid red；}

，但是你当然需要知道哪个元素接收到了焦点才能工作，所以我尝试了通用选择器

*：focus{outline:2px solid red；}

，但这不起作用

---

那么，谁能回答一个看似简单的问题，即什么因素正在获得关注。。。还有一点值得称赞的是，有谁能提供一段代码片段，让我能够真正看到发生了什么？

对于模式对话框，焦点应该回到对话框出现之前的位置

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

---

最容易通过键盘访问的应用程序和网站是那些你总是知道重点在哪里的应用程序和网站。必须禁用模糊功能；它不应该存在。

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

但是，在注释中，对话框的状态为：

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

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

我检查了Firefox和Chrome中HTML

元素的本机实现

Chrome 78：通过escape键离开对话框后，焦点将回到

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

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

1条件呈现：如果对话框不可见，它甚至不存在于DOM中 2通过HTML

hidden=true

或仅CSS

显示隐藏对话框：无

在案例1中，焦点将设置在Chrome和Firefox中的

在案例2中，两个浏览器都将焦点放在（现在隐藏的）模式中的元素上

---

如果无障碍性是一个问题，那么对不同图书馆的评估应该考虑到这一点。

有趣的问题，我也想知道答案。确认您的

焦点

未被其他选择器覆盖。试试

*：焦点{轮廓：2px纯红！重要；}

。这对我在随机网站上测试很有效。谢谢@jfeferman，这不是问题，但我忘记了使用

！重要信息

诊断期间是良好做法；如果你忘了，你会浪费很多时间。从进一步的调查中可以看出，焦点正在视口外移动。。。我只是不知道在哪里。如果你使用像画外音这样的辅助功能技术，你可以直观地跟踪焦点。另外，看一看。这可以为聚焦元素提供js句柄。您还可以使用javascript检查聚焦：

document.activeElement