我正在尝试修复 Angular2 Web 应用程序 （SAP） 中屏幕阅读器的可访问性错误。问题出在带有 Edge 的扫描模式下，当模态打开并使用向上和向下箭头穿过可聚焦元素时，焦点移动到模态外部的区域。但是，在正常模式下，如果按 Tab 键浏览模态中的元素，焦点永远不会离开模态。
目标是在扫描模式下实现与正常模式相同的体验。
下面是模态与其他组件的结构，例如模态是组件 A 的一部分：
组件 A.html
<div>
<form>
</form>
<modal-window></modal-window>
</div>
组件 A 是 html 页面的正文。html页面还包含其他组件，即页眉组件和页脚组件。模态不是通过对话框实现的，而是一个div，它使用变量来控制div 是否应该可见。
实现目标的正确方法是什么？
如果您将模态窗口设置为主页的"同级"，则可以将aria-hidden添加到主窗口，这将防止向上/向下箭头键在模态之外导航。
最初隐藏的模态窗口：
<body>
<div>
<!-- main page -->
</div>
<div style="display:none">
<!-- modal window -->
</div>
</body>
可见模态窗口
<body>
<div aria-hidden="true">
<!-- main page -->
</div>
<div style="display:block">
<!-- modal window -->
</div>
</body>