Testing aria-live="assertive" dynamically

Test versions: JAWS 2021, IE Edge, NVDA 2021.3.3, VoiceOver 12.4

1: Adding a new element with aria-live="assertive" to the DOM dynamically: does NOT work

Clicking the button below adds a new div with aria-live="assertive" directly to the DOM. This is to check whether screen reader supports them being added dynamically, or if they have to be in the DOM already and have their contents changed later to be read out (like aria live regions do on some browsers).

el.insertAdjacentHTML('afterend', '<div F>You need to fill in your username</div>');

Open an alert

---

2: Adding aria-live="assertive" to an existing element (which doesn't have that role) dynamically: does NOT work

errorMsg.setAttribute("role", "alert");

Open an alert

---

3: modifying the innerHTML of a aria-live="assertive" element already in the DOM: WORKS

errorMsg.innerHTML = "You need to fill in your password.";

Open an alert

Works in JAWS + IE, JAWS + Chrome, VO + Safari, VO + Chrome, NVDA + Firefox.

---

4: Making an invisible (display: none) element already in the DOM visible: does NOT work

the element.style.display property is directly altered in JS

<div aria-live="assertive" style="display: none">Please enter your postcode</div>
...
errorMsg.style.display = "block";

Open an alert

(This also works if the div's style is initially set in a stylesheet rather than inline; what's important is that the modification needs to be done at the JS level)

when new CSS is written to the page

<style id="myStyleElement"></style>

myStyleElement.innerHTML = "#errorMsg { display: block; }";

Open an alert

Notice the difference: we're modifying CSS only, but not via JS. This does not trigger the alert in JAWS.

---

5: Making an invisible ([hidden] attribute) element already in the DOM visible: WORKS

errorMsg.removeAttribute("hidden");

Open an alert