Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Live region: aria-atomic does not work well #290

Open
JAWS-test opened this issue Sep 5, 2019 · 0 comments
Open

Live region: aria-atomic does not work well #290

JAWS-test opened this issue Sep 5, 2019 · 0 comments
Labels
aria-live-region

Comments

@JAWS-test
Copy link

JAWS-test commented Sep 5, 2019 •
edited
Loading

Summary

Live region: aria-atomic does not work well

  1. Save as HTML file:
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>live region</title>
		<style>
			[id] {background-color:#f0f000;}
			[aria-atomic=true] {border:1px solid black;}
			[aria-atomic=false] {border:2px dotted black;}
			span {display:inline-block;margin:2px;padding:2px;}
			div {margin:2px;padding:2px;}
		</style>
	</head>
	<body>
		<div aria-live=polite><strong>none</strong><span>1<span id=0>change this</span>2</span>3</div>
		
		<div aria-live=polite aria-atomic=true><strong>true</strong><span>1<span id=1>change this</span>2</span>3</div>
		<div aria-live=polite aria-atomic=false><strong>false</strong><span>1<span id=2>change this</span>2</span>3</div>

		<div aria-live=polite><strong>true inside</strong><span aria-atomic=true>1<span id=3>change this</span>2</span>3</div>
		<div aria-live=polite><strong>false inside</strong><span aria-atomic=false>1<span id=4>change this</span>2</span>3</div>

		<div aria-atomic=true><span aria-live=polite><strong>true outside</strong><span>1<span id=5>change this</span>2</span>3</span></div>
		<div aria-atomic=false><span aria-live=polite><strong>false outside</strong><span>1<span id=6>change this</span>2</span>3</span></div>
		
		<div aria-live=polite aria-atomic=true><strong>true/false</strong><span aria-atomic=false>1<span id=7>change this</span>2</span>3</div>
		<div aria-live=polite aria-atomic=false><strong>false/true</strong><span aria-atomic=true>1<span id=8>change this</span>2</span>3</div>

		<h2>aria-atomic</h2>
		<button onClick="document.getElementById('0').innerHTML='changed 0';">none</button>	

		<button onClick="document.getElementById('1').innerHTML='changed 1';">true</button>	
		<button onClick="document.getElementById('2').innerHTML='changed 2';">false</button>	

		<button onClick="document.getElementById('3').innerHTML='changed 3';">true inside</button>	
		<button onClick="document.getElementById('4').innerHTML='changed 4';">false inside</button>	
		
		<button onClick="document.getElementById('5').innerHTML='changed 5';">true outside</button>	
		<button onClick="document.getElementById('6').innerHTML='changed 6';">false outside</button>	
	
		<button onClick="document.getElementById('7').innerHTML='changed 7';">true/false</button>	
		<button onClick="document.getElementById('8').innerHTML='changed 8';">false/true</button>	
	</body>
</html>
  1. Activate all buttons

Expected result

  • Consistent output between browsers
  • output without aria-atomic = aria-atomic=false
  • false: "Assistive technologies will present only the changed node or nodes"
  • true: "Assistive technologies will present the entire changed region as a whole, including the author-defined label if one exists"

Actual result

  • Different output from browser to browser
  • wrong output when aria-atomic is nested
  • wrong output if aria-atomic is not on the same element as the live region

see also: w3c/aria-practices#78 and many other problems with live regions: https://github.com/FreedomScientific/VFO-standards-support/issues?q=live+region

The following overview shows which output is made:

Firefox

  • none: "changed 0"
  • true: all content of the live region
  • false: "changed 2"
  • true inside: all content of the area with aria-atomic
  • false inside: "changed 4"
  • true outside: all content of the live region
  • false outside: "changed 6"
  • true/false: no output
  • false/true: all content of the inner area with aria-atomic

Chrome / IE 11

  • none: "changed 0"
  • true: all content of the live region
  • false: "changed 2"
  • true inside: "changed 3"
  • false inside: "changed 4"
  • true outside: "changed 5"
  • false outside: "changed 6"
  • true/false: all content of the live region
  • false/true: "changed 8"

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
@JAWS-test JAWS-test mentioned this issue Sep 9, 2019
Open
9 tasks
@JAWS-test JAWS-test changed the title Live region: aria-atomic does not work (IE 11, Chrome) Live region: aria-atomic does not work well Sep 9, 2019
@JAWS-test JAWS-test mentioned this issue Sep 28, 2019
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
aria-live-region
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@stevefaulkner @JAWS-test