仅在弹出模式中捕获焦点 IOS VoiceOver答案

【问题标题】：Trap focus with in popup modal only IOS voiceOver仅在弹出模式中捕获焦点 IOS VoiceOver
【发布时间】：2018-12-01 03:10:41
【问题描述】：

我在父组件上有可点击的链接，它将在其顶部启动自定义模式。我在 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>

【问题讨论】：

标签： html ios safari modal-dialog voiceover

【解决方案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 属性和 polyfill。有关这方面的信息，请参阅上述博客。

【讨论】：

在启用语音的情况下使用，滑动会将焦点移至浏览器的下一个/上一个按钮。这也不是弹出窗口的一部分。虽然 JS 焦点不适用于启用语音以将焦点移回弹出窗口。有什么建议吗？
如果您谈论的是浏览器控件，例如共享、书签、前进和后退，那么这是正确的行为。您也可以滑动到地址栏。您不想阻止对网页外部元素的访问。
我们可以改变这种行为吗？
不，这是件好事。您不应阻止用户访问地址栏和其他浏览器控件。