aria tags - force screen reader to read some text
on my website a user can click on a "livechat" button and a chat window appears. I was looking for some text to get read out (for accessibility users with a screen reader)
When the chat window appears the focus goes to the input text box - where users can enter their text to chat to an advisor. I have a div that is positioned a way off the screen - and I would like to get the text read out. I've tried aria-live=assertive, but no luck - doesn't get read out.
<div id="sreader" aria-live="Assertive"> if you use a screen reader you can call this number 0800 123 456</div>
Any ideas - how that can be forced to get read out?
Thanks
Answer
Support for aria-live is spotty.
Seeing a code example would be handy, but if you are always putting focus on the field then perhaps you want to use aria-label with some good messaging instead as this is better supported and will be spoken when the field gets focus.
Eg:
<label for="foo">Field Label</label>
<input type="text" id="foo" aria-label="Field Label. Note: If you are using a screen reader…">
Note that this still announces the field to the user and completely overrides the text in the <label>. This is why I included it in the aria-label.
Please bear in mind that this may not be the best approach, so you should test it with users. However, it involves fewer elements and puts the message directly where you seem to need it without any need to rely on scripting.
- Probably worth a read: Screen reader support for ARIA live regions
- An example from JAWS: ARIA (Accessible Rich Internet Applications) Live Regions