3

我有一个搜索表格。当用户提交表单时，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 处于打开状态。

4

1 回答 1

1

执行此操作的正确方法是使用在文档加载和离开屏幕时插入到文档中的 role="log" 区域。然后在更新发生时将要宣布的文本附加到该区域。

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

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

我已经在带有 VO 的 OS X、带有 NVDA 的 Windows 和带有 JAWS 14 的 Windows IE 11 上对此进行了测试，它们都可以正常工作。

于 2015-03-20T14:19:58.790 回答