E-mail List Archives
Thread: Screen reader events when dynamic tooltip ID refs are delayed
Number of posts in this thread: 2 (In chronological order)
From: Bryan Garaventa
Date: Wed, May 14 2014 8:18PM
Subject: Screen reader events when dynamic tooltip ID refs are delayed
No previous message | Next message →
Does anybody here know what events are processed when a dynamic tooltip is
rendered?
I was wondering what would happen if you had a delay between the triggering
of an active element and the updating of the aria-describedby attribute. In
theory it should work, and simply announce the text when it is explicitly
associated. This might occur in some dynamic web apps using callbacks.
E.G
<html>
<head>
<script type="text/javascript">
function testFn(link){
setTimeout(function(){
link.setAttribute('aria-describedby', 'tooltipId');
document.getElementById('tooltipId').style.display = 'block';
}, 500);
}
</script>
</head>
<body>
<a href="#" onclick="testFn(this); return false;"
onmouseover="testFn(this);" >
Test
</a>
<div style="display:none;" id="tooltipId" role="tooltip" >
This should be announced
</div>
</body>
</html>
It doesn't work at all though, not in JAWS nor NVDA in IE or FF.
From: Bryan Garaventa
Date: Thu, May 15 2014 2:03AM
Subject: Re: Screen reader events when dynamic tooltip ID refs aredelayed
← Previous message | No next message
Actually I realize my example doesn't really show a scenario that would
happen if the container were dynamically generated after a delay, so the
following would be better for this.
<html>
<head>
<script type="text/javascript">
function testFn(link){
setTimeout(function(){
link.setAttribute('aria-describedby', 'tooltipId');
var div = document.createElement('div');
div.setAttribute('role', 'tooltip');
div.setAttribute('id', 'tooltipId');
div.innerHTML = 'This should be announced';
document.getElementById('insert').appendChild(div);
}, 500);
}
</script>
</head>
<body>
<a href="#" onclick="testFn(this); return false;"
onmouseover="testFn(this);" >
Test
</a>
<div id="insert"></div>
</body>
</html>
I also tried innerHTML, but that doesn't work either. It updates fine in the
browser in the accessibility tree, the accessible name calculation generates
the innerText as the tooltip node label, as it should, but nothing is
announced by JAWS15 or NVDA in IE or FF.