Menu
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
648
An easy way to force most screen readers to start reading from a point is to give it focus. If you make the element focus-able (by giving it a tabindex ), then explicitly give it focus ( myElement. focus() ), the screen reader should start reading from there.
The aria-label attribute provides the text label for an object, such as a button. When a screen reader encounters the object, the aria-label text is read so that the user will know what it is.
Use alt text. If alt text is not provided, screen readers will ignore the image or read the image file name. To make your pages accessible, always add clear and descriptive alt text to each piece of non-text content, namely images, videos, icons, and embeds.
The <caption> element and <table> summary attribute both do similar jobs — they act as alt text for a table, giving a screen reader user a useful quick summary of the table's contents. The <caption> element is generally preferred as it makes it's content accessible to sighted users too, who might also find it useful.
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.
197
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
