时间戳

首页 > 解决方案 > 焦点在扫描模式下移出模态

javascript - 焦点在扫描模式下移出模态

问题描述

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

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

这是 modal 与其他组件的结构，例如 modal 是 componentA 的一部分：

组件A.html

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

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

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

标签： javascriptangularmodal-dialogaccessibility

解决方案

如果您将模态窗口设置为主页的“兄弟”，那么您可以添加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>

推荐阅读