JAWS не читает динамический контент. IE11

Question

У меня есть форма поиска. Когда пользователь отправляет форму, 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 включен.

Answer 1

Правильный способ сделать это - использовать область role="log", которая вставляется в документ, когда он загружается и находится вне экрана. Затем добавьте текст, который вы хотите объявить в этом регионе, когда происходят обновления.

Я изменил вашу скрипку, добавив код библиотеки a11yfy, который делает это: https://jsfiddle.net/17mkL2n5/1/embedded/result/

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

Я проверил это на OS X с VO, Windows с NVDA и Windows IE 11 с JAWS 14, и все они работают правильно.