JAWS无法读取Aria-Live ="Assertive"

Question

Hello Stackoverflow社区.这是我的第一个问题,但我会尽量简洁明了.

我的任务是更新我们的ASP.NET Web应用程序,使其符合508条款.这对我来说都很新鲜,而且我无法按预期工作.

我们有一个页面,用户可以通过onmouseover事件获取有关链接的其他信息.显然这对没有视力的用户不起作用.因此,我们为他们提供了一个"更多信息"按钮,显示与视力正常的用户相同的"工具提示"div.

我添加aria-live="assertive到"工具提示"div中的理解是,如果在页面加载时隐藏了div,然后通过按钮显示,则JAWS会读取它.令我沮丧的是,事实并非如此.

工具提示div看起来像这样:

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

它通过按钮的click事件显示,并带有以下JavaScript代码:

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

显示工具提示div的按钮如下所示:

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

我成功地让JAWS通过向工具提示div添加role ="alert"来阅读工具提示,但我想避免将警报角色用于非警报目的.主要是因为它显示"警报,这是我的工具提示文本".给用户.

我想知道当它变得可见时,让钳口读取工具提示的正确方法是什么？

我使用的是IE 11和JAWS 16. Internet Explorer和JAWS是我无法改变的要求.

谢谢!-射线

UPDATE

我想我会发布我们使用的解决方案,以防其他人遇到同样的问题.这是我们代码的简化版本,它显示了工具提示在显示时可见和读取的必要条件.这是一个服务器控件,因此许多ID都基于控件的ClientID属性并具有已知的后缀(_tootip,_tooltipcontainer等)

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');
}";

标记:

<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>

我希望这对未来的某个人有用.当我想到它时,我可以很容易地放置一个咏叹调的区域,它在屏幕外的某个地方保持可见,当工具提示被"显示"时它会改变它的文本.因此,有很多方法可以为这只特殊的猫提供皮肤.

Answer 1

作为一个快速破解，以下内容似乎对我来说适用于 IE11 + JAWS 15

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

您还可以尝试以下操作：

• 将工具提示的文本推送到 aria-live 区域，该区域始终可供屏幕阅读器“在屏幕上”使用
• 将用户的焦点动态转移到工具提示。（不过，我会非常小心地这样做。这可能会让您的用户感到困惑。）