How to hide ARIA-LIVE from screen readers but make they will can read content inside?

Question

I have on page ARIA-LIVE block like this:

<div
  aria-live='polite'
  role='log'
  aria-relevant='additions'
  aria-atomic='false'
  style='position: absolute; width: 1px; height: 1px; margin-top: -1px; clip: rect(1px, 1px, 1px, 1px); overflow: hidden;'>
  <div>message</div>
  <div>message</div>
</div>

And now, if i using keyboard arrows, screen reader can reach aria-live zone, it is located at the very bottom of the page, and read content which he contain.

Is there a way to hide the aria-alive zone but at the same time make it so that the content in it is still normally read by the reader?

Answer 1

That's kind of like asking how can one apply CSS display:none to an element but still allow the element to be seen.

You can hide elements from a screen reader by specifying aria-hidden="true". If you also have aria-live, then any updates to that element will be hidden from screen readers, essentially negating the purpose of having aria-live.

About the best you can do is associate a label with that region to say "this element is for announcing dynamic updates", or something like that. A screen reader user may find it, but it doesn't hurt anything. They can easily ignore it and move on to the next element.