我有一个搜索表单。当用户提交表单时,ajax请求会发送到服务器。当响应到来时,我更新找到的项计数值,但JAWS读取以前的项计值。为了让JAWS读取新内容,我使用aria属性和role="status"。但是JAWS仍然没有如预期的那样工作。
我尝试过的:让屏幕阅读器阅读添加了JavaScript的新内容,aria live和JAWS、aria live Regions等
我做错了什么?
HTML
<form class="search-form">
<label class="keyword-search-input-label" for="keyword-search-input">
<span class="hide">Search</span>
<input class="form-control" type="text" id="keyword-search-input" name="keyword"/>
</label>
<button id="clear-field-button" type="reset">
<span class="hide">Clear Search Field</span>
</button>
<button id="search-button" type="submit" aria-describedby="number-found-items">
<span class="symbol-label">Search</span>
</button>
</form>
<div id="number-found-items" role="status" aria-live="assertive" aria-atomic="true" aria-relevant="all">
<span id="number-found">0</span>
items found
</div>
JS-
function updateNumberFound(value) {
$numberFound.text(value || 0);
}
jsFiddle要重现问题,请尝试将重点放在搜索输入上,键入一些文本并按下搜索按钮,同时打开JAWS。
正确的方法是使用role="log"区域,该区域在文档加载和离开屏幕时插入到文档中。然后在更新发生时将您想要公布的文本附加到该区域。
我已经修改了你的fiddle,以包括a11yfy库的代码,它可以做到:https://jsfiddle.net/17mkL2n5/1/embedded/result/
jQuery.a11yfy.assertiveAnnounce(value + ' items found');
我已经在带有VO的OS X、带有NVDA的Windows和带有JAWS 14的Windows IE 11上测试过了,它们都能正常工作。