ARIA: aria-live 屬性

描述

當內容在初始載入後發生更改時，輔助技術 (AT) 使用者可能“看不到”這些更改。有些更改很重要，有些則不重要。aria-live屬性使開發人員能夠通知使用者有關更新的資訊，並根據重要性和緊急性選擇是立即、主動還是被動地通知 AT 使用者內容的變化。

如果螢幕的某個部分發生更新，並且其樣式使其易於被注意到，那麼大多數視力正常的使用者通常會注意到即時更新。另一方面，螢幕閱讀器一次只關注頁面的一部分；而這一部分可能不是發生更新的地方。aria-live屬性提供了一種方式，使開發人員能夠根據開發人員設定的事件觸發器（而不是使用者發起的動作）來向 AT 公告此類更改，從而讓 AT 使用者意識到內容已發生更改。

html

<div id="announce" aria-live="polite"></div>

aria-live屬性設定在一個空元素上。當頁面發生更新時，帶有該aria-live屬性的空元素應該被更新，幷包含一個簡短的公告，告知使用者已進行了更新。

html

<div id="announce" aria-live="polite">
  <p>This message is announced.</p>
</div>

當可訪問性 API 識別到上方即時區域的更改時，它將根據屬性的值公告該即時區域的內容。該元素不會獲得焦點。

如果您希望讀取即時區域的全部內容，請使用 aria-atomic。使用 aria-relevant 來僅定義需要重新讀給使用者看的更新部分。使用 aria-busy 來防止在更新仍在進行時進行公告。

選擇`aria-live`值

由於一些輔助技術使用者無法“看到”即時更新，因此aria-live屬性用於定義使用者應該

立即瞭解，
有機會時得知，並且
主動得知，但可以在他們選擇關注更新區域時瞭解。

aria-live的值描述了使用者代理、輔助技術和使用者可以從即時區域期望的更新型別，並用於表達重要程度。

當aria-live屬性設定為polite時，輔助技術會通知使用者更新，但通常不會中斷當前任務，更新的優先順序較低。當設定為assertive時，輔助技術會立即通知使用者，可能會清除之前更新的語音佇列。

螢幕閱讀器會在頁面載入時緩衝內容。因此，在初始可訪問性樹構建後新增的內容可能不會被注意到，因為 AT 使用者在動態小部件填充之前就開始消費內容——使用者可能不知道頁面已更新或在小部件完成載入時檢視內容更新。在這種情況下，您可以透過設定aria-live="polite"來告知使用者頁面已更新。

完全填充的頁面也可能有更新。例如，即時體育比分、新聞爬蟲和股票市場行情等內容。除非這些更新是頁面的主要功能，否則您可能不希望每次更新都通知使用者，但您確實希望告知他們小部件已更新。在這種情況下，您應該將aria-live設定為off。在這些場景中，除非使用者專注於即時區域，否則沒有理由通知使用者更新。

有些即時更新非常重要且有時效性。例如，如果您正在銷售演唱會門票，並且使用者購買門票的時間有限，您不希望等到活動間歇期才告知他們時間快到了（或已經過了）。當需要儘快獲得通知時，請將aria-live設定為assertive。如果更新的資訊是 alert，則不需要aria-live屬性。

在此有時限場景下，為了可訪問性，您還需要提供一種方式讓使用者延長可用時間或完全關閉計時器。