3

我有一個搜索表單。當用戶提交表單時,ajax請求被髮送到服務器。當響應到來時,我更新找到的項目計數值,但JAWS讀取先前項目的計數值。 爲了讓JAWS讀取新內容,我使用了aria屬性和role =「status」。但JAWS仍然無法按預期工作。JAWS不會讀取動態內容。 IE11

我已經試過什麼: 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上。

+0

你能設置一個jsfiddle來重現問題嗎? – unobf 2015-03-19 12:20:38

+0

@unobf,我添加了jsfiddle。你能檢查一下嗎? – iOne 2015-03-20 08:04:26

回答

1

執行此操作的正確方法是使用插入文檔時插入文檔並在屏幕外的角色=「log」區域。然後在更新發生時將要宣佈的文本附加到該區域。

我已經修改了你的小提琴包括a11yfy library's代碼做到這一點:https://jsfiddle.net/17mkL2n5/1/embedded/result/

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

我與JAWS 14測試了這個在OS X上與VO,窗戶用NVDA和Windows IE 11,他們所有的工作正確。

+0

我已經檢查瞭解決方案,你提供了,但不幸的是,JAWS的行爲仍然是一樣的) – iOne 2015-03-23 09:51:34

+0

什麼版本的JAWS和瀏覽器是什麼? – unobf 2015-03-23 12:40:16

+0

JAWS 15.0.4203和IE11,Chrome 41 – iOne 2015-03-24 10:19:06