Screen reader must read dynamic text

Question

Hello I have the following html and jquery that replaces text in the text paragraph. I am testing with the nvda screen reader and I want the text in #text to be read aloud when ever I push button one or two. What kind of aria roles / labels do I need to put on the elements to make that happen?

$('#btn').click(function(){
 $('#text').text('This is message one');
});
$('#btn2').click(function(){
 $('#text').text('This is message two');
});
<button id="btn">Read out text</button>
<button id="btn2">Read out text 2</button>
<p id="text"></p>

`I want the text to be read aloud when ever I push button one or two.`=>please explain. — Alive to die - Anant, Mar 17 '18 at 10:31
The nvda screen reader must read the text dynamically inserted in #text whenever #btn or #btn2 is pushed. — Newcoma, Mar 17 '18 at 10:35

score 1 · Accepted Answer · answered Mar 17 '18 at 18:31

Without knowing more details, you can keep it simple with just aria-live="polite".

<button id="btn" aria-live="polite">Read out text</button>

https://www.w3.org/TR/wai-aria/#aria-live

If the message is really important, you can use aria-live="assertive". You can also specify the types of changes you want read (aria-relevant) and what parts of the object to be read (aria-atomic). But for now, all you should need is aria-live="polite".

Screen reader must read dynamic text

1 Answers1