Back in 2012 I did some testing of ARIA alert support across browsers, screen readers and operating systems. The results were not encouraging. Fast forward to yesterday, while in a discussion with my TPGi colleague Jonny ‘Bonny’ James I had cause to revisit the alert tests and consequently retested alert support using some of the latest screen reader and browser combinations.
The original research considered four different methods for coding role=alert
messages and how well each was supported. These same 4 methods were tested again.
The four methods tested
createElement()
,insertAttribute()
,createTextNode()
andappendchild()
innerHTML
display:none
todisplay:block
,display:inline
etc.createTextNode
+ constraints
Refer to original article for details
The results
NVDA + Windows | 1, 2, 3 ,4 = | 1, 2, 3 = | 1, 2 = | 1, 2, 3, 4 = | |
---|---|---|---|---|---|
JAWS + Windows | 1, 2, 3 ,4 = | 1, 2, 3 ,4 = | 1, 2, 3 ,4 = | ||
VoiceOver + macOS | 1, 2, 3 ,4 = | 1, 2, 3 ,4 = | |||
VoiceOver + iOS | 1, 2, 3 ,4 = | 1, 2, 3 ,4 = | 1, 2, 3 ,4 = | ||
Narrator + Windows | 3, 4 = | 3, 4 = |
Note: tested using latest versions of the browser/screen reader/OS. Combinations that are known not to work together for general HTML content access were not tested.
Analysis
Support has improved considerably since the last round of tests in 2012. Methods 1, 2 and 3 are robustly supported by NVDA (1 and 2 only with IE), JAWS and VoiceOver. NVDA and JAWS with Edge are still not practical combinations. And unfortunately Narrator currently does not have the robust support one would expect when used with IE and Edge.
Comments
Things may have changed, but I remember a fifth triggering action as well: page load. It used to be that is the HTML markup contained an element with
role="alert"
assigned (such as a collection of form processing errors), the screen reader would chime and read the contents while the page was loading. I’ve noticed that some browser/screen reader combos seem to have dropped that functionality since I originally started using that pattern round about 2010/2011. But MDN still lists it as an option though and the spec doesn’t seem to preclude it.Has something else changed? Have browsers and/or AT regressed? Did folks on WCAG determine this was not a desirable feature? It seems like taking this option off the table necessitates JavaScript to handle the use case of error alerts. I’d love your thoughts.
Hi Aaron,
I don’t think that the method you describe has been determined as undesirable or wilfully taken off the table. I will do some digging and get back to you. As an aside, I tried a CSS only method and works fine.
Is there a reason you left Android off of your matrix?
Hi Joel, only reason is, I didn’t have an android device to hand, any data happily accepted!
Does it hold true for aria-live as well?
Looks like they are all firing on Chrome 59 on Android 7.1.2 – A little chatty with how it announces the alert twice. https://www.screencast.com/t/tRp4J9e9dyEH
(Video description: Video demonstration of Android Chrome with Talkback testing the HTML5 Accessibility role=alert test page. Alerts for each test are announced when triggered, but are announced twice.)