standards-support
standards-support copied to clipboard
Invisible contents and nodes in Live Region lead to reading pause (IE 11, Chrome)
Summary
Invisible contents in Live Region lead to reading pause (IE 11, Chrome)
- Save as HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>live region</title>
</head>
<body>
<div role=status id=1></div>
<button onClick="document.getElementById('1').innerHTML='live region';">regular</button>
<button onClick="document.getElementById('1').innerHTML='li<!--test -->ve <!--test -->region';">with comment</button>
<button onClick="document.getElementById('1').innerHTML='li<span hidden>hidden</span>ve <span hidden>hidden</span>region';">with hidden content</button>
</body>
</html>
- Activate the buttons one after the other (reload the page in Chrome between the buttons)
Expected result
Invisible content (like HTML comments or hidden content) has no effect on the output of the Live Region (the output does not differ from the output when the content is read with the arrow keys)
Actual result
- IE 11: long reading pause (like at the end of a sentence)
- Chrome: short reading pause (as with a blank character)
- Firefox: ok
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
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
Also without invisible content, each node is output individually in Chrome and IE 11, even if it would be output as contiguous when read with arrow keys (e.g. spanelements without spaces):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>live region</title>
</head>
<body>
<div role=status id=1></div>
<button onClick="document.getElementById('1').innerHTML='<span>1</span><span>2</span><span>3</span>';">span</button>
</body>
</html>