JAWS 不读取动态内容。IE11 浏览器



我有一个搜索表单。当用户提交表单时,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上测试过了,它们都能正常工作。

最新更新