Accessibility: Make VoiceOver read text without focus on the web page

I have a form on a webpage (HTML, JavaScript, jQuery). How to make VoiceOver read something when the form message fails due to invalid entries in the form (everything happens on the client side) without focusing on the element containing the error description?

I managed to get it to work with NVDA, but VoiceOver does not like to read something without focusing on it, or at least I do not set the appropriate attributes for it. Any recommendations here?

The code that works in NVDA is

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>
+4
source share
1 answer

/ , , , . "" https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role

. off screen 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;
}

HTML:

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

,

+6

Source: https://habr.com/ru/post/1611627/


All Articles