Aria-Live="Assertive" is not read by JAWS

Question

Hello Stackoverflow community. This is my first question, but I will try to be as concise and detailed as possible.

I have been tasked with updating our ASP.NET web applications to be section 508 compliant. This is all very new to me, and I'm having trouble getting things to work as expected.

We have a page where the user gets additional information about a link via an onmouseover event. Obviously this doesn't work for non-sighted users. So we are providing them with a "More information" button that displays the same "tooltip" div that the sighted user gets.

I added aria-live="assertive to the "tooltip" div with the understanding that if the div was hidden when the page loads and then shown via the button, it would be read by JAWS. To my dismay, this wasn't the case.

The tooltip div looks like this:

<div id='tooltip' aria-live='assertive' style='display:none;'>
    <span id='tooltip_message'>This is my tooltip text</span>
</div>

It is shown via the click event of the button with the following JavaScript code:

function ShowTooltip(ttID)
{
  var tt = $('#' + ttID);   
  tt.css('display', '');
}

The button to show the tooltip div looks like this:

<button id='ttBtn' onclick="ShowToolTip('tooltip'); return false;">
    More information
</button>

I had success getting JAWS to read the tooltip by adding role="alert" to the tooltip div, but I'd like to avoid using the alert role for non-alert purposes. Mainly because it reads "Alert, this is my tooltip text." to the user.

I'd like to know what is the proper method to get jaws to read the tooltip when it becomes visible?

I am using IE 11 and JAWS 16. Internet Explorer and JAWS are requirements that I cannot change.

Thanks! -Ray

UPDATE

I thought I'd post the solution we used in case others have the same problem. This is a simplified version of our code that shows just what's necessary to get the tooltip visible and read when it is displayed. This is a server control, so many of the ID's are based off of the control's ClientID property and have known suffixes (_tootip, _tooltipcontainer, etc.)

JavaScript:

 //handles showing/hiding of the tooltip
 function ShowToolTip(ttID)
 {
    var tt = $('#' + ttID + '_ToolTip');    
    var ttContainer = $('#' + ttID + '_ToolTipContainer');  

    var ttClone = tt.clone();
    tt.remove(); 
    ttClone.css('display', '');
    ttContainer.append(ttClone);
}

//Closes the tooltip and returns focus to the hidden (from sighted users) button that shows it.
function CloseToolTip(ttID)
{     
    var tt = $('#' + ttID + '_ToolTip');                   
    tt.css('display', 'none');
}";

Markup:

<button id="tooltip1_508KeyboardButton" class="hidden" onclick="ShowToolTip('tooltip1'); return false;" onblur="CloseToolTip('tooltip1');">Click for overview</button>

<div id='tooltip1_ToolTipContainer' aria-live='polite' aria-atomic='true'>
    <div id='tooltip1_ToolTip' class='section tooltip' style='display:none;'>
        <span id='tooltip1_Msg'>This is my tooltip's text.</span>
   </div>
</div>

I hope this is of use to someone in the future. As I think about it, I could have easily placed an aria-live region that stays visible somewhere off screen that changes it's text when the tooltip is "shown". So there are many ways to skin this particular cat.

Answer 1

As a quick hack, the following seems to work for me with IE11 + JAWS 15

function ShowTooltip(ttID)
{
  setTimeout(function(){
    $('#' + ttID).css('display', 'block');
  }, 100)
}

You could also try the following:

• Push the text of your tooltips to an aria-live region that is always available "on screen" to screen readers
• Shift the user's focus dynamically to the tooltip. (I'd be very careful about doing this, though. It can be confusing to your users.)