爲什麼總是從直播區域開始讀取語音？

我已經看到這個工作在一些網站上完全相同的環境下面，但它不適用於我自己非常簡化的代碼，即使我從工作網站複製相同的標記具有相同的詠歎調屬性。爲什麼總是從直播區域開始讀取語音？

環境：Safari瀏覽器9.1.2 +畫外音在OS X埃爾卡皮坦

我試圖改變唱腔原子，詠歎調活，詠歎調相關的，它總是從生活區，每次我一開始讀向活動區域添加一些新內容。任何想法爲什麼它不工作，以及如何使它工作？

HTML

<label for="speak-content"></label> 
<input id="speak-content" type="text"> 
<button id="speak">add some stuff to read</button> 
<div id="live-region" role="alert" aria-live="polite" aria-atomic="false" aria-relevant="additions"></div>

的JavaScript

$("#speak").on("click", function(event) { 
    var liveRegion = $("#live-region"); 
    var content = $("#speak-content").val(); 
    var p = $("<p>").text(content); 
    liveRegion.append(p); 
});

來源

2016-12-08 Jason Lee

也許刪除警告角色？ – yuxhuang

這不起作用，它仍然讀取整個事情，我的目標是讓它只讀取更新，但看起來甚至明確地設置詠歎調原子爲「假」仍然不起作用。 –

據說你的代碼應該可以工作。如果它仍然無法在macOS Sierra中運行，您可能會在VO/Safari中遇到一個錯誤。也許你可以嘗試使用不同的瀏覽器組合，如VO/Chrome或VO/Firefox。 – yuxhuang

嘗試使用aria-atomic=true。如果未定義aria-atomic，則默認爲false，屏幕閱讀器將讀取整個活動區域。如果您只是希望屏幕閱讀器宣佈發生了什麼變化（例如倒計時或結果計數），請使用aria-atomic=true。 Read more about aria-atomic at W3C。

另一個說明，雖然不是你的問題：role=alert是相同的aria-live=assertive。使用role=status以匹配您使用aria-live=polite。否則，您會給瀏覽器提供相沖突的信息。

來源

2016-12-09 14:47:05 aardrian

感謝有關'role = status'的信息。我的意圖是讓它只讀取更新，並且我嘗試將'aria-atomic'設置爲「false」和「true」，只是刪除這個屬性，這些都不起作用，它總是讀取整個活動區域。我嘗試過使用'role = status'，它仍然讀取整個事物。如果可能，請使用我的代碼在給定的環境下嘗試，在輸入框中鍵入「hello」，然後點擊按鈕，然後清理輸入框並鍵入「world」，然後再次單擊按鈕，它會顯示「hello world」「世界」。 –

如果您使用了Codepen或JSBin，這將變得容易得多。另外，您使用的是jQuery，而不是JavaScript（小點，但在compat問題上值得注意）。我認爲你遇到了一個錯誤。除了'aria-live = assertive'之外，刪除所有內容。由於我沒有相同的環境，因此您必須對其進行測試。 http://s.codepen.io/aardrian/debug/jVpMoe – aardrian

爲什麼總是從直播區域開始讀取語音？

回答

相關問題