CODEWITHSUNDEEP
accessibilityvoiceoverscreen-readers
wordSmith
wordSmith

Reputation: 3183

Assertive aria-live region not read by Voice Over on page load/form submit

I have an aria-live region on a role="alert" with the value "assertive" that is not being spoken on form submit. It is being written, by PHP, at that time too, which is like page load.

It works fine in NVDA on a PC, but nothing is spoken on a Mac. I swear I have tested this before and have used this technique frequently.

Any ideas why it is not being spoken?

The div looks like this:

<div class="alert alert-danger" role="alert" aria-live="assertive">Error: please fix the indicated fields:</div>

Upvotes: 4

Views: 9864

Answers (3)

Joshua Smith
Joshua Smith

Reputation: 1

The aria-live attribute essentially marks a dom element as something that will receive changes, and those changes should be conveyed to the user.

The role="alert" attribute achieves a similar announcement, but is interpreted differently by various screen readers. When using role="alert" it has an implicit aria-live="assertive" so you dont need both.

The aria-live element should be in the DOM at page load, and the content to be read should be added as needed. Screen readers will not always parse the page continually for additional elements, and so it will not be announced.

Chrome vox will continually parse and thus pick it up, JAWS will usually pick it up, Voiceover and Talkback usually won't in my experience. Voiceover and talkback working as expected depends heavily on using the correct browser.

QuenticC was mostly correct, however the aria-live="assertive" announcements work most reliably when they exist in the initial page source and then the content is added later. The role="alert" (generally) works best when injected into the page as a new element.

Upvotes: 0

QuentinC
QuentinC

Reputation: 14722

Directly reading ARIA live regions at page load is known to not work, or not always reliably with certain combinations of screen readers + browsers. This is a fact: you can't do anything about it.

ARIA live regions are read when a new live region is added to the DOM or when the text content of an existing live region is updated. This works for almost all combinations of screen readers + browser. However, nothing is clearly specified for live reagions that exists at page load, if they have to be read or not; so, it depends on the screen reader and the browser.

Knowing this, you can trigger the read by doing one of the two things mentionned above, shortly after the page is loaded:

  • Make a new live region appear in the DOM
  • Change the text of an existing live region

Note that it won't work if you add/change role and/or aria-live attributes of an existing element. The element has to be new or its text has to effectively change.

Upvotes: 10

discojoe
discojoe

Reputation: 440

role=alert and aria-live="assertive" are effectively the same (alert implies assertive), although this shouldn't cause a problem itself.

It maybe you need to use PHP to output the markup, and then use JS to add the role="alert" attribute to it, to trigger it to speak, once the page has completed loading.

Upvotes: -1

Related Questions