An ARIA alert Test Case

Based on a comment to my article, Not All ARIA Widgets Deserve role="application", I put together a few examples of ARIA alerts and tested them with JAWS and NVDA in Firefox 3.6, Internet Explorer 7 and 8.

The Results Summarised

One, it seems that NVDA just doesn't want to do alerts in Internet Explorer, though it shines in Firefox, as you'd expect. I'd love to know why. I should probably know this. Is it as simple as some accessibility API thing?

Two, JAWS 11 and 12 do great with role="alert" in both Firefox and Internet Explorer.

Three, JAWS 10, on the other hand, while it does well in FF3.6, doesn't manage role="alert" in IE7 and IE8 at all. If you are looking to support JAWS 10 in IE7 or IE8 at all, it is likely best to double up on alerts with both role="alert" and aria-live="assertive". While this is somewhat redundant since, by definition, the alert role is to be processed as an assertive live region, doing so does allow JAWS 10 to automatically announce the updated alert's contents in those two browsers. And since the alert role is effectively an assertive live region by default, this shouldn't, I expect, cause any problems or conflicts.

The Tests

Below are four examples of ARIA alerts. Following each example is a table providing detailed results.

The examples were tested with NVDA 2010.2, JAWS 10, 11, and 12, using Firefox 3.6 and Internet Explorer 7 and 8. Do note that none of the examples were tested using the combination of JAWS 12 and IE7. However, I'm assuming that since JAWS 11 with IE7 works well in all cases, with the exception of Example D, that JAWS 12 with IE7 works the same.

Example A: Does Not Use role="application"

In this example, the p element in which the alert text is displayed simply has role="alert" applied.

Alerts will display here.

Example A Results
Screen Reader IE7 IE8 FF3.6
JAWS 10 No No Yes
JAWS 11 Yes Yes Yes
JAWS 12 Not Tested Yes Yes
NVDA No No Yes

Example B: Uses role="application"

In this example, a div set with role="application" wraps the buttons and alert area.

Alerts will display here.

Example B Results
Screen Reader IE7 IE8 FF3.6
JAWS 10 No No Yes
JAWS 11 Yes Yes Yes
JAWS 12 Not Tested Yes Yes
NVDA No No Yes

Example C: No role="application", but uses aria-live

In this example, there is no role="application" used, but the p with role="alert" is also set with aria-live="assertive", which is redundant since, by definition, the alert role is to be processed as an assertive live region. However, doubling up like this certainly makes a difference to JAWS 10 in Internet Explorer 7 and 8.

Alerts will display here.

Example C Results
Screen Reader IE7 IE8 FF3.6
JAWS 10 Yes Yes Yes
JAWS 11 Yes Yes Yes
JAWS 12 Not Tested Yes Yes
NVDA No No Yes

Example D: No role="application", but uses aria-live

In this final example, there is no role="application" used. The alert's p element does not use role="alert", but is only set with aria-live="assertive". As such, it is not an actual ARIA alert, but does exhibit the same behaviour. Since there seems be some benefit for JAWS 10 in Internet Explorer when role="alert" is combined with aria-live="assertive", this example exists merely to see if, at least in the context of these examples, there is any difference in behaviour between using an aria-live region as opposed to an actual alert role.

Alerts will display here.

Example D Results
Screen Reader IE7 IE8 FF3.6
JAWS 10 Yes Yes Yes
JAWS 11 Not Really (see Note below) Yes Yes
JAWS 12 Not Tested Yes Yes
NVDA No No Yes

Note: With this example, even though the alert text gets updated, JAWS 11 in IE7 sometimes only announces the text that was in the alert area before the new alert is called; but sometimes it announces the previous alert text immediately followed by the updated alert text. This would seem to be a regression with JAWS 11 since JAWS 10 in IE7 works fine, according to my tests, anyway. Whether this example works correctly in JAWS 12 with IE7 I don't know as I didn't test that combination.