ARIA Live Regions and `role="alert"` not working on Mac

Question

I am trying to get an error alert scenario working properly with assistive technology. There are two approaches i like which I am testing:

Using ARIA Live Regions

http://pauljadam.com/demos/aria-alert-validation.html

Using ARIA Alert

http://test.cita.illinois.edu/aria/alert/alert1.php

Both of this test pages work fine on Jaws 14 and VDA on PC in that the error is read outloud. However, using a Mac with voice over it does not read the errors in those examples out load.

To reproduce:

• go to http://test.cita.illinois.edu/aria/alert/alert1.php
• turn on voice over with command+f5
• click the guess again button after typing some numbers (the alert should be read).

Is there some non-default setting I need to be away of? Or is there a better way to do this? I'm a little surprised all theses examples do not work.

Answer 1

Here is solution by Steve Faulkner from Paciello Group Blog that supports Safari on Mac:

function addError() {
    var elem1 = document.getElementById("add1");

    document.getElementById('add1').setAttribute("role", "alert");

    document.getElementById('display2').style.clip = 'auto';
    alertText = document.createTextNode("alert via createTextnode()");
    elem1.appendChild(alertText);
    elem1.style.display = 'none';
    elem1.style.display = 'inline';
}

<div id="display2" role="alert"><span id="add1"></span></div>
<input type="submit" value="Method 4 alert - display" onClick="addError()">