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 …我遇到一个问题，屏幕阅读器无法读取 FireFox 中 aria-live 部分中更改的文本。
这是一个简单的页面示例，在 Chrome 中，屏幕阅读器会在更改发生时读取更改，而在 FireFox 中则不会：
<div aria-live="assertive" id="moo">
</div>
<script>
let i = 0;
setInterval(() => {
document.getElementById('moo').innerText = 'moo' + i++
}, 2000)
</script>难道我做错了什么？除了人们在 Firefox 中使用的 aria-live 之外，还有其他方式在更改出现时宣布更改吗？
我在 Mac-Firefox-VoiceOver 上进行了测试（它适用于 Mac-Chrome-VoiceOver）
我正在实现一个搜索框。其中一种情况是必须公布结果总数。为了实现这一目标，我将<p>标签放在一个区域内aria-live，并按预期宣布它。
预期场景：
用户输入一个字符串 --> 点击 Enter --> 显示结果并宣布字符串。
边缘情况是用户按 Enter 两次。
如果用户在没有任何更改的情况下再次按 Enter 键，则不会更新任何内容，因为计数仍然相同并且不会宣布任何内容。
我尝试在输入单击时使用它：
if (document.getElementById("header")) {
const currentText: string = document.getElementById("header").innerHTML;
document.getElementById("search-header").innerHTML = "";
document.getElementById("search-header").innerHTML = currentText;
}
但是，它仍然没有宣布。
还有其他方法可以实现此目的吗？
问题:我遇到了一个无法解决的问题.我有一个有角度的Web应用程序.加载内容时会显示页面加载微调器/指示器.当页面内容加载时,微调器被隐藏.这个"div"永远不会从DOM中删除.
当显示加载div时,不会读取加载div的内容(通过NVDAor钳口).
<div class='loading' aria-live='polite' aria-label='Do not refresh the page' tabindex="-1">Do not refresh the page</div>
我不想改变应用程序的结构,但是可以使用'aria tags'来解决这个问题,只是想知道我是否还需要做更多的事情才能让咏叹调生活？
更新(2016年7月27日)
进一步澄清:我没有从DOM中删除内容,而是使用css来显示/隐藏内容(display:none to display:block,反之亦然)
我有这条用JS动态更新的HTML.屏幕阅读器仅在更新时读取新值.它没有说更新的输入标签.
<ul class="points-transfer-detail-points-calculation clearfix">
<li>
<label for="points-to-transfer">{{{ pointsToTransferLabel }}}</label>
<input id="points-to-transfer" type="text" aria-controls="brand-points points-left-after-transfer" placeholder="XXX,XXX" {{#if disabled }}disabled{{/if}}>
<p id="points-to-transfer-error" class="points-transfer-detail-form-error" aria-hidden="true" role="alert">{{{ pointsToTransferErrorMessage }}}</p>
</li>
<li>
<label for="brand-points">{{{ brandPointsLabel }}}</label>
<input id="brand-points" type="text" aria-live="polite" aria-atomic="true" disabled>
</li>
<li>
<label for="points-left-after-transfer">{{{ pointsLeftLabel }}}</label>
<input id="points-left-after-transfer" type="text" aria-live="polite" aria-atomic="true" disabled>
</li>
</ul>
我曾尝试使用aria-labelledby,aria-describedby,role="alert"和aria-label,但没有结果,只有输入的值,永不他的标签.
从我对Google和StackOverflow的所有研究中,我找不到合适的答案.
我在Firefox中使用NVDA作为屏幕阅读器.
谢谢您的帮助.