3

I have a search form. When user submits form, ajax request is sent to the server. When the response comes, I update found items count value, but JAWS reads previous items count value. To get JAWS read new content I use aria attributes and role="status". But JAWS still doesn't work as expected.

What I've tried: Getting screen reader to read new content added with JavaScript, aria-live and JAWS, ARIA Live Regions and etc.

What am I doing wrong?

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 To reproduce the problem try to focus on search input, type some text and press search button, while JAWS is on.

Community
  • 1
  • 1
iOne
  • 153
  • 2
  • 12

1 Answers1

1

The correct way to do this is to use a role="log" region that is inserted into the document when it loads and is off screen. Then to append the text that you want announced to that region when updates occur.

I have modified your fiddle to include the a11yfy library's code which does this: https://jsfiddle.net/17mkL2n5/1/embedded/result/

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

I have tested this on OS X with VO, Windows with NVDA and Windows IE 11 with JAWS 14 and they all work correctly.

unobf
  • 7,158
  • 1
  • 23
  • 36
  • I've checked the solution, that you provided, but, unfortunately, JAWS's behavior is still the same) – iOne Mar 23 '15 at 09:51
  • what version of JAWS and what browser? – unobf Mar 23 '15 at 12:40
  • JAWS 15.0.4203 and IE11, Chrome 41 – iOne Mar 24 '15 at 10:19
  • I hope you are not expecting it to work in Chrome - it works fine for me in IE11 with JAWS 14 – unobf Mar 24 '15 at 16:44
  • I hope, that the solution will be found and it will work for at least in IE11 with JAWS 15. – iOne Mar 25 '15 at 07:57
  • I tested it with JAWS 15 and IE11 and it works there too – unobf Mar 25 '15 at 08:58
  • Also tested in IE 11 with JAWS 16 – unobf Mar 25 '15 at 12:54
  • I've figured out, why it doesn't work in my environment. It was very not obvious) There is a **list of items** in my project, which is updated, when the response from the server comes. Because of this list JAWS doesn't read **found items count value**. It seems, that the list update interrupts JAWS announcement. Is there any way to tell JAWS to not react on **items list** changes? – iOne Apr 30 '15 at 13:08
  • can you jsfiddle a more complete example? – unobf May 01 '15 at 20:49