Aria-Live="Assertive" 未被 JAWS 读取

Question

你好 Whosebug 社区。这是我的第一个问题，但我会尽量简明扼要。

我的任务是更新我们的 ASP.NET 网络应用程序以符合第 508 条的规定。这对我来说都是全新的，我很难让事情按预期工作。

我们有一个页面，用户可以通过 onmouseover 事件获取有关 link 的其他信息。显然，这不适用于视力不佳的用户。因此，我们为他们提供了一个 "More information" 按钮，该按钮显示与视力正常的用户相同的 "tooltip" div。

我将 aria-live="assertive 添加到 "tooltip" div 的理解是，如果 div 在页面加载时隐藏，然后通过按钮显示，它会由 JAWS 阅读。令我沮丧的是，事实并非如此。

工具提示 div 如下所示：

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

通过按钮的点击事件显示，代码如下JavaScript：

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 读取工具提示，但我想避免将警报角色用于非警报目的。主要是因为它向用户读取"Alert, this is my tooltip text."。

我想知道什么是让 jaws 在工具提示可见时阅读它的正确方法？

我正在使用 IE 11 和 JAWS 16。Internet Explorer 和 JAWS 是我无法更改的要求。

谢谢！ -雷

更新

我想我会 post 我们使用的解决方案，以防其他人遇到同样的问题。这是我们代码的简化版本，仅显示了在显示工具提示时可见和阅读工具提示所需的内容。这是一个服务器控件，因此许多 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>

我希望这对以后的人有用。正如我所想，我可以很容易地放置一个 aria-live 区域，它在屏幕外的某个地方保持可见，当工具提示为 "shown" 时，它会更改它的文本。所以有很多方法可以给这只猫剥皮。

Answer 1

作为快速技巧，以下内容似乎适用于 IE11 + JAWS 15

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

您也可以尝试以下方法：

将工具提示的文本推送到始终 available "on screen" to screen readers
将用户的焦点动态转移到工具提示上。（不过，我会非常小心地这样做。这可能会让您的用户感到困惑。）

Aria-Live="Assertive" 未被 JAWS 读取

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

html

wai-aria

jaws-screen-reader

aria-live