Thanks in advance for any suggestions. Completely new to JS and coding generally, so bear with me here. I'm not remotely familiar with any frameworks, so this is strictly vanilla.

I have a modal that appears as the first thing the user sees. It contains a series of inputs and a button to submit that data. When the button is clicked, the modal's opacity fades to 0, and it ceases to accept pointer-events, allowing the user to see and use the content beneath it.

Goal: I don't want screenreaders to announce anything in the background (let's call it backgroundContainer) until the modal is dismissed.

Tried: Setting aria-hidden = "true" in the HTML and then having the form submission trigger backgroundContainer.setAttribute('aria-hidden', 'false'); in the JavaScript. Tried the same thing as an event listener when the user clicks on the Submit button.

Outcome: The HTML works as expected; background-container is ignored on loading the page. However, NVDA(screenreader) doesn't read the backgroundContainer after the button press.

Tried: Adding backgroundContainer.inert = false; to the above and wrapping the whole thing in a function to be called either by the form's submission or in response to a separate event listener connected to the submit button. For example:

function ariaReset() {
    let backgroundContainer = document.getElementById('background-container');
    backgroundContainer.inert = false;
    backgroundContainer.setAttribute('aria-hidden', 'false');
}

Outcome: As above.

I've also tried a few variations on the above, but I suspect I'm just going about it all wrong. Any and all help appreciated.

Update: As per the advice given, I was able to bring focus to the heading on the main page using tabindex. Were I writing this again, I'd do it very differently and avoid the use of a modal altogether, but this is a learning project for me (rather than being for public consumption), and rewriting would have taught me less. In the end, what I've done is:

Make use of CSS classes to show/hide the two different container divs (ie. .container-hide is simply display: none) which I've swapped in JavaScript (e.g. container.className = "container-show") when the form is submitted. This seems to work well with NVDA which is the screen reader I'm using.

Once the main content is shown, its key-information receives focus (foo.tabIndex = -1;). Elsewhere, ariaLive is used to update the user as they interact with UI in ways that trigger changes to the DOM. A slightly better understanding gained in the process. Thank you for your answers.