在扫描模式下焦点移出模态 [英] focus moving out of modal in scan mode
问题描述
我正在尝试修复Angular2 Web应用程序（SAP）中屏幕阅读器的可访问性错误。问题在于带边缘的扫描模式中，当模态打开时，使用向上和向下箭头穿过可聚焦的元素，焦点移到模态之外的区域。但是，在普通模式下，如果通过模式中的元素进行制表，则焦点永远不会超出模式。
I am trying to fix an accessibility bug for screen reader in an Angular2 web application(SAP). The problem is in SCAN MODE with Edge, when the modal is open and using up and down arrows to travel through focusable elements, the focus moving out to the area outside the modal. However, in normal mode, if tabbing through elements in the modal, the focus never goes out of the modal.
目标是实现与普通模式相同的体验。扫描模式。
The goal is to achieve the same experience as normal mode in scan mode.
以下是模态与其他组件的结构，例如，模态是组件A的一部分：
Here is the structure of modal with other components, for example the modal is part of componentA:
componentA.html
componentA.html
<div>
<form>
</form>
<modal-window></modal-window>
</div>
componentA是html页面的主体。 html页面还包含其他组件，即页眉组件和页脚组件。
模态不是由对话框实现的，而是一个div，它使用变量来控制div是否可见。
The componentA is the body of the html page. The html page also contains other components i.e. the header component and footer component. The modal is NOT implemented by dialog, but a div and it uses variable to control if the div should be visible or not.
正确的方法是什么达到我的目标？
What is the right way to achieve my goal?
推荐答案
如果您将模式窗口设为主页的同级，则可以添加< a href = https://www.w3.org/TR/wai-aria/#aria-hidden rel = nofollow noreferrer> aria-hidden 进入主窗口，这将阻止向上/向下箭头键在模态之外导航。
If you make your modal window a "sibling" of your main page, then you can add aria-hidden to the main window and that will prevent the up/down arrow keys from navigating outside the modal.
最初隐藏的模态窗口：
<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>
这篇关于在扫描模式下焦点移出模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
