standards-support
standards-support copied to clipboard
FreedomScientific
Live regions are not output reliably
Summary
Live regions are not output reliably
- Save as HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>live region</title>
<style>
.none {display:none;}
</style>
</head>
<body>
<div aria-live=assertive id=1>
live region
</div>
<button onClick="document.getElementById('1').className='none';">add class</button>
<button onClick="document.getElementById('1').removeAttribute('class');">remove class</button>
<button onClick="document.getElementById('1').setAttribute('style','display:none');">add style</button>
<button onClick="document.getElementById('1').removeAttribute('style');">remove style</button>
</body>
</html>
- Activate all four buttons one after the other
- Replace aria-live=assertive with role=alert, save the HTML file again
- Activate all four buttons one after the other
Expected result
- role=alert should have same output as aria-live=assertive
- Output should be consistent in all browsers
- output should not depend on whether display:none is added by style or by class
Actual result
- role=alert causes other output than aria-live=assertive (Chrome)
- Output from browser to browsers different
- output depends on whether display:none is added by style or by class (IE 11)
See also https://github.com/w3c/aria-practices/issues/78 and many other problems with live regions: https://github.com/FreedomScientific/VFO-standards-support/issues?q=live+region
The live region is output as follows:
aria-live=assertive and aria-live=polite
Firefox: always Chrome: never IE 11: only with class, not with style
role=alert
Firefox: always Chrome: always IE 11: never
Additional Information
JAWS version and build number
JAWS 2019.1907.42
Operating System and version
Windows 8
Browser and version:
Chrome 76.0.3809.100 Firefox 68.0.2 Internet Explorer 11.0.9600.19431
The different output of the live region in Chrome (depending on whether role=alert or aria-live is used) also occurs when there is a change from aria-hidden=true to aria-hidden=false. However, it does not occur if the visibility (with display or aria-hidden) is not changed at the live region itself, but at a descendant element. Then the output in Chrome is always done.
test cases:
Results:
- JAWS - pass both on Firefox, fails assertive on Chrome
- NVDA - fails assertive on Firefox, fails assertive on Chrome
JAWS
Chrome Version 121.0.6167.140 (Official Build) (64-bit) + JAWS 2024
- assertive: nothing announced
- alert: add class, add style update announced
Firefox 122.0.1 (64-bit) + JAWS 2024
- assertive: add class, add style - update announced
- alert: add class, add style - update announced
NVDA
Chrome Version 121.0.6167.140 (Official Build) (64-bit) + NVDA 2023.3.2
- assertive: nothing announced
- alert: add class, add style - update announced
Firefox 122.0.1 (64-bit) + NVDA 2023.3.2
- assertive: nothing announced
- alert: add class, add style - update announced
