盡管隱藏了 div，但仍宣布 aria-live 文本更改

Question

我有一個帶有圖標的 div 和一條消息，除非有人將鼠標懸停在它上面，否則它會在單擊時執行操作。

對於視力正常的用戶，單擊該圖標時會切換為復選標記，並且當該圖標懸停在其上方時會更改消息。 但是，對於使用選項卡按鈕的用戶，不會顯示該消息。

帶有消息的 div 是一個 aria-live 區域，但由於它是隱藏的，屏幕閱讀器不會宣布新消息。 盡管區域被隱藏，有沒有辦法宣布消息？

Answer 1

最簡潔的答案是不。 如果您希望宣布其內容更改，則必須顯示 aria-live 區域。

你可能會讀到這個問題，我給出了一個小技巧：顯示元素幾秒鍾，時間足夠讓屏幕閱讀器閱讀消息，然后再次隱藏。 但是，您必須至少顯示消息 3-5 秒，因為如果您在仍在朗讀該元素時隱藏該元素，則某些屏幕閱讀器會在結束前切掉。

如果顯示消息那么長時間是不可接受的，您仍然可以通過使用如下所示的一些 CSS 將其置於屏幕外。 請注意，許多框架已經具有類似 .visually-hidden、.sr-only 等具有類似代碼的類。 如果您正在使用其中之一，請使用它們定義的內容。

.visually-hidden {
top:0;
left:-2px;
width:1px;
height:1px;
position:absolute;
overflow:hidden;
}

``

Answer 2

我找到了一個更好的方法來處理這個問題。 首先，您必須始終在 DOM 中設置活動元素可見，而不是在 UI 中，然后，您需要更新textContent或innerHTML ； 下一步，只需setTimeout幾毫秒（在我的情況下為 100 毫秒）或更長時間，然后清除里面的內容。 通過這種方式，屏幕閱讀器仍將完整地閱讀上一條消息。 如果在此期間必須附加新消息，您還可以clearTimeout 。

例子：

function updateLiveRegion(message) {
    const elem = document.getElementById("my-id");
    elem.textContent = message;
    clearTimeout(myTimeout);
    myTimeout = setTimeout(() => {
        elem.textContent = "";
    } , 1000);
}

updateLiveRegion("my message");