Toggle aria-live when announcement finishes?

Question

I'm currently working on a interactive pdf reader project to make it more accessible. I made a <p> element that's invisible on the screen and gave it the aria-live attribute. Whenever I want to announce something, like opening a drawer, I set the text of that <p> element. However, if the user wants the whole page to be announcement, which the key for Voice Over is VO + a , the <p> element is also read, but I would like to prevent that from happening.

Can someone suggest if this is the proper way to announce changes? If it is then how could I prevent <p> element from being read if user wants the whole page to be read? I'm currently using the <p> element to announce if a drawer is opened/closed, or if there's a change to the font/page number etc.

Answer 1

You cannot prevent an aria-live element from being read by a screen reader reading through the whole page. You can hide it visually from the screen, but not hide it from the virtual buffer or internal representation of the screen reader so that it wouldn't be reachable and readable.

To hide the element from the screen, look at CSS classes like .visually-hidden, .sr_only, etc. present in popular frameworks. This is a common way of showing something to screen reader users while hiding it for regular screen users.

To hide the element from screen reader representation (but not necessarily the screen), you can use aria-hidden. But then aria-live become inoperant as well.

You may also think to use display:none or visibility:hidden to hide the element from both the scren reader and the visual screen. Other tricks of the same kind like font:0, width/height:0, opacity:0, clip:0, etc. have the same problem and they don't necessarily effectively hide the element everywhere. In that case though, the behavior isn't consist. ARia-live will stay operant as normal in Some screen readers + browser combinations depending on the exact trick used, while it will stop working with others, most notably VoiceOver on Safari Mac and iOS.

A small trick consists of removing the element from the DOM or making it blank a short while after it has been shown or set, so that a scren reader going through the page wouldn't find it afterwards. However, you must also be careful with this. I have already observed in certain cases that it makes the screen reader to immediately cut of the announcement if the element was deleted too early (while the announcement was still being spoken). And, of course, you have no way of knowing if the screen reader already finished to read a message, if it is currently reading it, or if it hasn't yet read it. If you do this, take your time and leave the element visible 5, 10 or more seconds to make sure the message is read entirely.

So, in conclusion, you have no real good way to keep your aria-live element working while preventing it from being reached by screen readers' normal ways of reading through a page.

Answer 2

As @quentinc already explained the differences between visually hidden and screen reader hidden elements, you can't have an element be available to a screen reader but prevent it from a "read all" command.

Using aria-live is very handy in many situations but without more details about your specific situation, it's hard to suggest alternative recommendations. But, since you did mention "drawer open", to me that sounds like something that can expand/collapse. If so, then you should check out aria-expanded . You can change the value of that attribute from false to true to indicate to a screen reader that something expanded. A drawer opening would be considered expanded. The screen reader will take care of announcing the change so you wouldn't need aria-live .