如何防止VoiceOver关注模式背后的内容

Question

我有一个模式，我不希望画外音阅读其背后的内容。设置aria-modal=true应该已经足够了，但是我看到VoiceOver并不像NVDA和JAWS这样更好的屏幕阅读器那样支持这种行为。

https://a11ysupport.io/tech/aria/aria-modal_attribute#support-table-2

它还说，作者可以自己为VoiceOver实现这一功能。我已经成功地用JS将键盘焦点捕获到模式内(使用选项卡键)，但是当我使用箭头键时，画外音就会落后于内容。我怎样才能做到这一点？我的模式结构如下：-

    <div
      role="dialog"
      aria-modal="true"
      aria-labelledby="title"
      aria-describedby="description"
      tabindex="-1"
    >
      <div class="sticky-header">
        <h2 id="title" class="title">
          This is a heading
        </h2>
      </div>
      <div class="modal-content">
        <p id="description">
          This is a paragraph.
        </p>
      </div>
      <div class="sticky-footer">
        <button
          type="button"
        >
          Cancel
        </button>
        <a href="#">
          Proceed
        </a>
      </div>
    </div>

Answer 1

我不是一个好的UI导出，但这是一个小小的建议，请尝试这些属性，我希望你会得到更好的解决方案。

我的解决方案是:role=“警报对话框”aria-modal="true“

Answer 2

我也有这个问题。通过声音，用户可以“点击”外部和滑动出对话框。我相信这是VoiceOver的一个问题，我在网上找不到任何解决方案。这不是最好的解决方案，但我最终得到的结果是在打开/关闭对话框事件中添加一个布尔值。然后使用带aria-隐藏的布尔值。

<div [attr.aria-hidden]="IsMenuOpen">content behind menu</div>

<button (click)="openMenu(); isMenuOpen = !isMenuOpen" ></button>