gpt4 book ai didi

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

转载 作者:太空狗 更新时间:2023-10-29 16:35:53 25 4
gpt4 key购买 nike

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

我的任务是更新我们的 ASP.NET Web 应用程序以符合第 508 节的要求。这对我来说都是全新的,我很难让事情按预期工作。

我们有一个页面,用户可以通过 onmouseover 事件获取有关链接的附加信息。显然,这不适用于视力不佳的用户。因此,我们为他们提供了一个“更多信息”按钮,该按钮显示与视力正常的用户相同的“工具提示”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 角色用于非警报目的。主要是因为它显示“警报,这是我的工具提示文本”。给用户。

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

我正在使用 IE 11 和 JAWS 16。Internet Explorer 和 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>

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

最佳答案

作为快速破解,以下内容似乎适用于 IE11 + JAWS 15

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

您也可以尝试以下方法:

  • 将工具提示的文本推送到始终为 available "on screen" to screen readers 的 aria-live 区域
  • 将用户的注意力动态转移到工具提示上。 (不过,我会非常小心地这样做。这可能会让您的用户感到困惑。)

关于html - JAWS 未读取 Aria-Live ="Assertive",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29682943/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com