Question

我在父组件上具有可单击的链接，它将在其顶部启动自定义模式。我在将焦点仅集中在Safari ios VoiceOver的模式中遇到了很大的大问题。滑动焦点位于父级可点击链接的后面。如何在模式弹出后仅将注意力集中在模式上并完全禁用父组件。

我的应用程序在Angular 5上

这是模态模板

<div class="modal-backdrop modal-open fade in" data-backdrop="static" data-keyboard="false"></div>
<div class="modal fade in"  id="confirmModal" role="dialog" aria-labelledby="modal-title" data-keyboard="false"  (keydown.escape)="cancel()"  >
        <div class="modal-content">
            <div class="modal-header">
            <button type="button" id="btnClose" class="fa fa-times close" data-dismiss="modal" aria-label="Close" (tap)="cancel()"  (keydown.spacebar)="cancel()" (click)="cancel($event)" (keydown.space)="cancel()" (keydown.enter)="cancel();" (keydown.tab)="onTab()" (keydown.shift.tab)="onShiftTab()" (keydown.escape)="cancel()" ></button>                 
            </div>
            <div class="modal-footer">
                <button type="button" id="btnDefault" class="btn btn-default" data-dismiss="modal" (tap)="cancel()"  (keydown.enter)="cancel()" (click)="cancel($event)" (keydown.spacebar)="cancel()"  (keydown.space)="cancel()" (keydown.tab)="onTab()" (keydown.shift.tab)="onShiftTab()" (keydown.escape)="cancel()" attr.aria-label="cancelbutton">Cancel</button>
                <button type="button" id="btnPrimary" class="btn btn-primary"  (tap)="onOK()" (keydown.enter)="onOK()" (click)="onOK($event)" (keydown.spacebar)="cancel()" (keydown.space)="onOK()" (keydown.tab)="onTab()" (keydown.shift.tab)="onShiftTab()" (keydown.escape)="cancel()" attr.aria-label="buttonLabel">Confirm</button>
            </div>
        </div>      
</div>

Answer 1

通常，您应该将HTML整理为

<body>
  <div>
    <!-- your main page -->
  </div>
  <div style="visibility:hidden">
    <!-- your dialog -->
  </div>
</body>

使对话框成为主页的“同级”。显示对话框时，可以将aria-hidden="true"添加到主页上，这将完全“隐藏”屏幕阅读器的背景页面。 VoiceOver不允许您滑动以隐藏到背景页面。

<body>
  <div aria-hidden="true">
    <!-- your main page -->
  </div>
  <div style="visibility:visible">
    <!-- your dialog -->
  </div>
</body>

注意在对话框上使用CSS visibility属性。有关更多信息，请参见https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/。查找“需要提防的其他陷阱”标题。

还请注意，您仍然必须在对话框中捕获键盘焦点。 aria-hidden对键盘没有影响，仅与屏幕阅读器通信。为此，您可以使用inert属性和。有关上述信息，请参见上述博客。

仅在弹出模式IOS voiceOver中使用陷阱陷阱

1 个答案: