保留重点关闭模式或弹出窗口

我对可访问性有疑问。有几个图层/模块或弹出窗口，只需点击一个按钮或链接即可打开。保留重点关闭模式或弹出窗口

我需要将焦点保留在原始元素上，点击该元素打开模式或弹出窗口或弹出窗口，一旦它们关闭，焦点应该返回到单击元素。当我在页面上标签关闭模态窗口或弹出按钮后，焦点从begining

我使用的角度引导模式，并通过角状态提供配置打开自定义弹出窗口开始

目前。

2017-04-25 Shashi

从打开模式/弹出的事件中保存事件目标，并在模态/弹出关闭时将焦点设置在该目标上。请参阅[MDN HTML元素参考 - 焦点方法]（https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus）。 – georgeawg

通过打开模式之前，保持目前的工作重点解决了上述问题，并恢复焦点返回时模态关闭

来源

2017-08-21 14:29:34 Shashi

的官方建议从WAI-ARIA Authoring Practices - Modal Dialog状态：

当对话框关闭，焦点返回到调用对话框的元素，除非：

调用元素不再存在。然后，将焦点设置在提供逻辑工作流程的另一个元素上。

工作流设计包括以下条件的，可以偶尔会聚焦不同的元素一个更合乎逻辑的选择：

这是不太可能的用户需要立即重新调用对话框。

对话框中完成的任务直接与工作流程中的后续步骤相关。

将焦点移回到你的模式打开之前的重点元素：

之前打开模式，参考保存到document.activeElement。
关闭模式后，focus参照前面的activeElement。

例子：

let previousActiveElement = document.activeElement; 
// Open and close the modal 
if (document.body.contains(previousActiveElement)) { 
    previousActiveElement.focus(); 
}

来源

2017-09-05 06:58:07 Peter

将焦点移回到你的模式打开之前的重点元素：

打开模式之前，请保存到document.activeElement参考。关闭模式后，将引用集中到前一个activeElement。

来源

2017-09-22 14:51:21 Shashi

保留重点关闭模式或弹出窗口

回答

相关问题