'How to prevent VoiceOver from focusing on the content behind a modal

I have a modal and I don't want voiceover to read the content behind it. Setting aria-modal=true should've been enough but then I saw that VoiceOver does not support this behaviour out of the box like better screen readers like NVDA and JAWS.

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

And it says that authors can implement this functionality on their own for VoiceOver. I have successfully trapped the keyboard focus inside the modal (using the tab key) with JS but voiceover is going behind the content when I use the arrow keys. How can I achieve this? My modal is structured like this:-

    <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>
javascripthtmlaccessibilitywai-ariavoiceover


Solution 1:[1]

I had this issue as well. With voice over the user can "click" outside and swipe out of the dialog. I believe this is a issue with VoiceOver, and I could not find any solution on the web. It's not the best solution but what I ended up with was to add a boolean to the open/close dialog event. Then use the boolean with aria-hidden

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

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Glen Stautland

Related Questions