WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Screen reader events when dynamic tooltip ID refs aredelayed

for

From: Bryan Garaventa
Date: May 15, 2014 2:03AM

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.


-----Original Message-----
From: <EMAIL REMOVED>
[mailto: <EMAIL REMOVED> ] On Behalf Of Bryan Garaventa
Sent: Wednesday, May 14, 2014 7:19 PM
To: 'WebAIM Discussion List'
Subject: [WebAIM] Screen reader events when dynamic tooltip ID refs are
delayed

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.

messages to <EMAIL REMOVED>