重新宣布一個<p>即使文本相同，在 aria-live 下</p>

Question

我正在實現一個搜索框。 其中一種情況是必須公布結果的總數。 為了實現這一點，我將<p>標記放在aria-live區域內，它會按預期宣布它。

預期場景：

極端情況是用戶按兩次回車。

如果用戶在沒有任何更改的情況下再次按下回車鍵，則不會更新任何內容，因為計數仍然相同並且不會宣布任何內容。

我嘗試在輸入點擊時使用它：

if (document.getElementById("header")) {
  const currentText: string = document.getElementById("header").innerHTML;
  document.getElementById("search-header").innerHTML = "";
  document.getElementById("search-header").innerHTML = currentText;
}

但是，它仍然沒有宣布。

還有另一種方法可以做到這一點嗎？

Answer 1

我最近遇到了類似的情況。 您已經實現了一半的解決方案（將innerHTML重置為空字符串，然后將其設置為currentText ）。 解決方案的另一半是將aria-relevant屬性設置為all 。

默認情況下， aria-relevant屬性設置為additions text ，但這忽略了removed選項。 由於您需要屏幕閱讀器將更改拾取為空字符串（當您刪除文本時），您需要將屬性設置為all （這與additions text removed相同）。

作為最佳實踐，通常應該不理會aria-relevant屬性，但我還沒有找到另一種方法來讓屏幕閱讀器兩次發布相同的公告。

在您的情況下，我還將aria-live屬性直接添加到具有id="search-header"的元素中。 它應該看起來像這樣：

<h6 id="search-header" aria-live="polite" role="status" aria-relevant="all">
  X items found
</h6>

您可以在此處閱讀有關aria-relevant屬性的更多信息。

而且，這里有更多關於aria-live區域的信息。

Answer 2

我遇到了同樣的問題。 最后，如果將相同的字符串再次添加到 aira-live div 中，我會通過添加句點來修改字符串。

我將新的文本值與標簽中的現有值進行了比較，如果值相同，則將句點 (.) 添加到傳入的字符串中。

if (msg == $(".aria-live-div").text()){
    msg = msg + "."
}