Accessibility: Make VoiceOver read a text without focus on a Web page

Question

I have a form in a web page (HTML, JavaScript, Jquery). How can I make VoiceOver read something out when the form submission fails due to invalid entries in the form (everything happens on the client-side) without setting focus to an element containing error description?

I was able to make it work with NVDA, but VoiceOver doesn't like to read something without focusing on it or at least I'm not setting the proper attributes for it. Any recommendations here?

The code that works in NVDA is this

if(logic for error) {    
    $('#inline-errors-alert').attr({ 'aria-hidden': 'false' });
    setTimeout(function() { $('#inline-errors-alert').attr({ 'aria-hidden': 'true' })}, 500);    
}

and the HTML markup is like this

<div class="hidden" id="inline-errors-alert" role="alert" aria-describedby="inlineErrorsMessage" aria-hidden="true">
    <p id="inlineErrorsMessage">some message here.</p>
</div>

Answer 1

There is disagreement/confusion about what should happen to live regions when their display properties change see the "note" on the following page https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role

Your implementation has to alert non-visible to sighted users. So you should use an off screen technique with the following CSS:

.hiddden {
    border: 0;
    clip: rect(0 0 0 0);
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    width: 1px;
    position: absolute;
}

Then use the following HTML markup:

<div class="hidden" id="inline-errors-alert" role="alert" aria-atomic="true">
    <p>some message here.</p>
</div>

You would then replace the entire contents of the alert every time you generate an error message