Making a modal accessible with aria-hidden or inert

Question

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.