Question

我正在尝试修复Angular2 Web应用程序（SAP）中屏幕阅读器的可访问性错误。问题在于带“边缘”的“扫描模式”中，当模态打开时，使用向上和向下箭头穿过可聚焦的元素，焦点移到模态之外的区域。但是，在普通模式下，如果通过模式中的元素进行制表，则焦点永远不会超出模式。

目标是在扫描模式下获得与普通模式相同的体验。

这是模态与其他组件的结构，例如，模态是组件A的一部分：

componentA.html

<div>
<form>
</form>
<modal-window></modal-window>
</div>

componentA是html页面的正文。 html页面还包含其他组件，即页眉组件和页脚组件。该模式不是由对话框实现的，而是一个div，它使用变量来控制div是否可见。

实现我的目标的正确方法是什么？

Answer 1

如果将模式窗口设为主页的“兄弟”，则可以在主窗口中添加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>