3

我有一个搜索表单。当用户提交表单时,ajax请求被发送到服务器。当响应到来时,我更新找到的项目计数值,但JAWS读取先前项目的计数值。 为了让JAWS读取新内容,我使用了aria属性和role =“status”。但JAWS仍然无法按预期工作。JAWS不会读取动态内容。 IE11

我已经试过什么: Getting screen reader to read new content added with JavaScriptaria-live and JAWSARIA 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上。

+0

你能设置一个jsfiddle来重现问题吗? – unobf 2015-03-19 12:20:38

+0

@unobf,我添加了jsfiddle。你能检查一下吗? – iOne 2015-03-20 08:04:26

回答

1

执行此操作的正确方法是使用插入文档时插入文档并在屏幕外的角色=“log”区域。然后在更新发生时将要宣布的文本附加到该区域。

我已经修改了你的小提琴包括a11yfy library's代码做到这一点:https://jsfiddle.net/17mkL2n5/1/embedded/result/

jQuery.a11yfy.assertiveAnnounce(value + ' items found'); 

我与JAWS 14测试了这个在OS X上与VO,窗户用NVDA和Windows IE 11,他们所有的工作正确。

+0

我已经检查了解决方案,你提供了,但不幸的是,JAWS的行为仍然是一样的) – iOne 2015-03-23 09:51:34

+0

什么版本的JAWS和浏览器是什么? – unobf 2015-03-23 12:40:16

+0

JAWS 15.0.4203和IE11,Chrome 41 – iOne 2015-03-24 10:19:06