aria-live is interrupted by other labels, how to stop this behavior?

问题

I currently have this div with aria-live=assertive:

<div id="accesibility__ready" aria-live="assertive" aria-atomic="true"></div>

Currently in my js file I have a method for setting everything in page with a tabindex (first headlines) then the <p>'s. Once this method is finished I want to notify user through my aria live that he can now navigate with tab:

  var ariaAlert = document.getElementById('accesibility__ready');
  ariaAlert.setAttribute('aria-label','Content updated tab navigation ready');

I have noticed that sometimes the aria-live is read but then it gets interrupted by all the other labels (that are not aria-live), that somehow the screenreader decides to read.

I'm using Chrome and ChromeVox extension.

So How do I stop aria-live from being interrupted by some other labels?

回答1:

It doesn't sound like aria-live is being used correctly. aria-live is intended to be used on an element if the contents/children of that element will change. This includes adding/removing/changing text on the element itself (such as textContent) or adding/removing DOM elements nested under the element. See the W3 spec on aria-live for full details.

aira-live is not used to indicate when an attribute of the element has changed. That is, using aria-live on a <div> and then changing that div's aria-label will not be announced.

aria-atomic controls how much is read when a change happens. Should only the specific thing that changed be read (aria-atomic="false" - the default) or should the entire element be read (aria-atomic="true").

For example,

<div aria-live="polite">
  this message will self destruct in 
  <span id="counter">X</span> 
  seconds
</div>

Without aria-atomic specified (and thus the default value of false is used), if you update counter to '5', then only the value of counter will be announced, "5". However, if you use aria-atomic="true" on the <div>

<div aria-live="polite" aria-atomic="true">
  this message will self destruct in 
  <span id="counter">X</span> 
  seconds
</div>

then when you change counter to '5', you'll hear "this message will self destruct in 5 seconds".

As a few side notes. You should always try to use aria-live="polite" unless you have a message that is super important that needs to interrupt whatever else is being read. Rarely are there cases where aria-live="assertive" have to be used. Using assertive might also clear other messages that are pending to be read.

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

"User agents or assistive technologies MAY choose to clear queued changes when an assertive change occurs"

And finally, the whole premise to your question sounds like you have an option that makes all headings and paragraphs tabbable (tabindex="0"). I don't know the purpose of that option, and you might have a legitimate reason for doing so, but if the purpose is to "help" screen reader users navigate to all the elements on your page, you'd be doing the screen reader user a disservice. Screen reader users already have great navigation mechanisms built into the screen reader itself. For example, on a PC, a JAWS or NVDA user can navigate to all the headings by using the 'H' quicknav key. Or they can display a dialog that shows all the headings. They can navigate to various other elements with similar shortcut keys ('B' to move to the next button, 'T' to move to the next table, 'R' or 'D' to move to the next landmark, 'L' to move to the next list, etc). VoiceOver on iOS has the rotor which allows a similar type navigation to headings, buttons, tables, etc. So as long as your page uses semantically correct html (such as <h2> for a heading instead of just a style to make the font larger and bold), then you should be ok without a feature to make everything focusable.

来源：https://stackoverflow.com/questions/52427632/aria-live-is-interrupted-by-other-labels-how-to-stop-this-behavior

标签

accessibility

wai-aria