title: How to prevent VoiceOver from focusing on the content behind a modal
body: <p>I have a modal and I don't want voiceover to read the content behind it. Setting <code>aria-modal=true</code> 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.</p>
  <p><a href="https://a11ysupport.io/tech/aria/aria-modal_attribute#support-table-2" rel="nofollow noreferrer">https://a11ysupport.io/tech/aria/aria-modal_attribute#support-table-2</a></p>
  <p>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:-</p>
  <pre><code>    &lt;div
        role=&quot;dialog&quot;
        aria-modal=&quot;true&quot;
        aria-labelledby=&quot;title&quot;
        aria-describedby=&quot;description&quot;
        tabindex=&quot;-1&quot;
      &gt;
        &lt;div class=&quot;sticky-header&quot;&gt;
          &lt;h2 id=&quot;title&quot; class=&quot;title&quot;&gt;
            This is a heading
          &lt;/h2&gt;
        &lt;/div&gt;
        &lt;div class=&quot;modal-content&quot;&gt;
          &lt;p id=&quot;description&quot;&gt;
            This is a paragraph.
          &lt;/p&gt;
        &lt;/div&gt;
        &lt;div class=&quot;sticky-footer&quot;&gt;
          &lt;button
            type=&quot;button&quot;
          &gt;
            Cancel
          &lt;/button&gt;
          &lt;a href=&quot;#&quot;&gt;
            Proceed
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>