JAWS不会读取Aria-Live =“ Assertive”

Question

您好Stackoverflow社区。 这是我的第一个问题，但我会尽量简洁明了。

我的任务是将我们的ASP.NET Web应用程序更新为符合508节。 这对我来说是非常陌生的，而且我无法按预期工作。

我们有一个页面，用户可以通过onmouseover事件获取有关链接的其他信息。 显然，这对于没有视力的用户不起作用。 因此，我们为他们提供了一个“更多信息”按钮，该按钮显示了有视力的用户所获得的“工具提示” div。

我向“ tooltip” div添加了aria-live="assertive ，但要理解的是，如果在页面加载时div被隐藏，然后通过按钮显示，则JAWS会读取它。令我沮丧的是，这不是案件。

工具提示div如下所示：

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

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

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

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

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

通过在工具提示div中添加role =“ alert”，我成功地让JAWS读取了工具提示，但是我想避免将警报角色用于非警告目的。 主要是因为它显示为“警告，这是我的工具提示文字”。 给用户。

我想知道什么是使下巴在可见时读取工具提示的正确方法？

我正在使用IE 11和JAWS16。InternetExplorer和JAWS是我无法更改的要求。

谢谢！ -射线

更新

我以为我会发布我们使用的解决方案，以防其他人遇到相同的问题。 这是我们代码的简化版本，显示了使工具提示可见并在显示时读取的必要条件。 这是一个服务器控件，因此许多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)
}

您还可以尝试以下操作：

• 将您的工具提示文字推到一个实时显示的咏叹调区域， 屏幕阅读器始终在屏幕上可用
• 动态将用户的焦点移至工具提示。 （不过，我会非常谨慎地执行此操作。这可能会使您的用户感到困惑。）