JAWS没有阅读动态内容。 IE11

时间:2015-03-19 10:54:40

标签: javascript accessibility internet-explorer-11 jaws-screen-reader aria-live

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

我尝试过的: 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。

1 个答案:

答案 0 :(得分:1)

正确的方法是使用角色=&#34; log&#34;加载并在屏幕外时插入文档的区域。然后在更新发生时将要宣布的文本附加到该区域。

我修改了您的小提琴以包含执行此操作的a11yfy library's代码:https://jsfiddle.net/17mkL2n5/1/embedded/result/

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

我在OS X上使用VO,使用NVDA的Windows和使用JAWS 14的Windows IE 11进行了测试,它们都能正常工作。