使用 ARIA Live Regions 讓重要資訊不漏接 (上)
概念篇
在現代網頁中，各式各樣的互動與內容變化是相當頻繁的，例如今天我們搜尋了某樣商品，網頁可能會用動態更新的方式將搜尋結果以列表的形式呈現給使用者。雖然這些變化對一般使用者可能再明顯不過，對於使用輔助科技的使用者，若沒有適當的處理，可能會讓使用者無法接收到重要訊息，或是造成更大的困惑。善用 Live Regions 可以讓頁面上的動態變化更好的被輔助科技使用者所察覺，特別是對於無法用視覺掃視整個頁面的螢幕閱讀器使用者來說，動態變化的無障礙設計對他們的使用體驗影響甚鉅。
ARIA Live Regions 允許開發者向輔助科技的使用者提供即時訊息，使 UI 更容易使用。在這篇文章中，我們將深入探討 ARIA Live Regions，包括它的使用情境、相關屬性和常見錯誤等等，相信在閱讀完本篇文章後，你能對於如何處理動態變化的無障礙有更深入的認識。
ARIA Live Regions 是什麼？
Live Regions 和 aria-live 的關係
根據 MDN 文件，Live Regions 指的是頁面上特定的、不需要依賴頁面重新載入而更新的區域或部件。尤其是簡短且非互動性的內容變化，我們應該將其視為 Live Regions。而透過使用 ARIA 屬性中的 ‘aria-live’，我們可以明確標示某個區域為 Live Regions。
什麼時候會需要用到 Live Regions?
在許多日常的使用情境中，Live Regions 都可以發揮它的功用：
- Live Chat（即時聊天）：當使用者參與即時聊天，新訊息應能夠自動地告知使用者，而不需要手動移動鍵盤焦點。
- Form Validation（表單驗證）：在提供輸入表單的情境，使用者送出表單時，我們常會使用動態的方式將錯誤提示顯示在輸入欄位旁，螢幕閱讀器使用者需要收到通知，以便他們能發現並採取行動。
- Shopping Cart（購物車）：當使用者向購物車添加或移除商品時，購物車狀態的變化可能會以視覺動畫或簡短文字來提示使用者，螢幕閱讀器使用者需要收到這些變化的資訊，以幫助使用者掌握購物車內容。
除了上述的使用情境外，凡是當使用者的操作導致動態內容的變更，且此變更不會改變鍵盤焦點時，我們就可以適當地運用 Live Regions 來提醒使用者頁面發生了變化。但是，若這些動態內容的變化是由應用程式自動產生，而非使用者直接操作所造成的，那麼在使用 Live Regions 時就需要特別謹慎，以免過度使用造成使用者在瀏覽過程中受到不必要的干擾。
aria-live 的三個主要屬性值
aria-live 有三個主要屬性值：off、polite 和 assertive，決定了螢幕閱讀器處理 Live Regions 的優先權。
- aria-live=”off”：預設值，表示 Live Regions 功能被禁用，不會自動通知螢幕閱讀器即時變化的訊息。
- aria-live=”polite”：在此模式下，當有新內容更新時，螢幕閱讀器會等待當前的讀顯完成時，再通知使用者。通常用於提供不太緊急的訊息。
- aria-live=”assertive”：在此模式下，即使當前螢幕閱讀器有正在讀顯的其他內容，螢幕閱讀器仍會立即刷新新的動態內容來通知使用者。通常用於提供緊急或重要的訊息。
其他相關的 ARIA 屬性
除了 aria-live 屬性，還有其他一些相關的 ARIA 屬性，如：
- aria-atomic：有 true 和 false 兩個值，預設為 false。用於設定即使只有部分的節點發生變化，螢幕閱讀器是否應將 Live Region 視為整體，並報讀父節點內全部子節點的內容，而非只報讀有變化的子節點。
- aria-relevant：用於指定哪些種類的內容變化需要螢幕閱讀器來報讀，可填入的值包含：additions（新增內容）、text (文字或文字替代內容)、removals（移除內容）或 all（全部）。預設為 aria-relevant=”additions text”，意指當區域內有文字或節點的新增時，通知螢幕閱讀器報讀。
- aria-busy：用於表示該元素正在載入或是更新，預設值為 false。當我們希望輔助科技等到內容完整載入後再通知使用者時，就可以使用這個屬性。
預設會有 Live Region 行為的 ARIA roles
某些 ARIA 角色具有預設的 Live Region 行為，這些角色包括：
- role=”log”：顯示對話、錯誤訊息或是其他具有時序性的紀錄 (logging)。
- role=”status”：用來顯示應用程式中，重要性並不足以成為 alert 的狀態訊息的區域，與 aria-live=”polite” 類似，螢幕閱讀器會等待當前讀顯內容完成才刷新新的動態內容。
- role=”alert”：用於報告重要且通常具有時效性的警告或錯誤訊息，與 aria-live=”assertive” 類似，螢幕閱讀器會立即刷新讀顯內容。
此外還有一些其他角色，如 role=”progressbar”、role=”marquee” 和 role=”timer”，也具有 Live Region 行為以提供有關其狀態和進度的即時訊息。
螢幕閱讀器會在焦點移動時報讀焦點所在的內容，但 Live Regions 的功能，卻是能讓我們在不改變焦點的情況下，也能夠讓螢幕閱讀器讀出資訊。非互動性的 Alert 訊息，即是運用這樣功能的一個很好的案例，我們就來一起看看 APG 中的 Alert Pattern 吧。
Alert Pattern
Alert 作為一個在應用程式中十分常見的元件，ARIA Authoring Practices Guide (APG) 中自然也提供了一些指導性準則。
根據 APG 中的 Alert Pattern，Alert 旨在提供重要且通常具有時效性的訊息，但他們並不應該中斷使用者當前的工作，因此 Alert 不應影響鍵盤焦點。若需要即時中斷使用者的流程，使用會轉移鍵盤焦點的 Alert and Message Dialogs pattern 會較為合適。
另外一些值得留意的事情是，由於 Alert 並不會影響鍵盤焦點，應用程式不應該要求使用者採取一些行動，例如關閉他們，才執行後續的動作。同時 Alert 停留在螢幕上的時間也不應過短，也不應太過頻繁地使用 Alert 來打斷使用者的注意，因為過於頻繁的打擾會讓具有視覺和認知障礙的使用者難以順利使用。
範例
重要的無障礙功能
由於 Alert 是用於傳遞重要訊息，因此輔助科技通常會提供特殊的行為，以幫助使用者注意。例如，螢幕閱讀器會中斷其他語音，並在報讀新 Alert 前發出特殊的聲音或詞語。
重要的鍵盤操作
Alert 「不應」影響使用者當前的鍵盤焦點。
重要的 ARIA 屬性
- role=”alert”：表示該元素會作為顯示警示內容的容器 (container)。
- aria-live=”assertive”：Alert role 的預設屬性，不須額外設定。旨在告訴螢幕閱讀器當有新的警示內容時，應立即中斷當前語音，執行報讀的動作。
- aria-atomic=”true”：Alert role 的預設屬性，不須額外設定。旨在告訴輔助科技將警示的全部内容視為警示訊息，即使只有部分内容發生了變化。
結語
在這篇文章中，我們介紹了 Live Regions 的概念，它能在不改變焦點的情況下，使螢幕閱讀器讀出畫面上動態出現的內容，像是表單驗證、購物車變更、即時聊天等情境。了解 aria-live 與其相關的 ARIA 屬性值的運用方式，並透過 Alert Pattern 這個常在應用程式中出現的功能，希望你能對 Live Regions 有基礎的認識。下篇我們會繼續探討在實作 Live Regions 時值得留意的要點與可運用的套件，那我們就下篇見囉！
參考資料
你的支持是我們的最大動力 💪
如果喜歡我們的文章，可以按下拍手👏來支持我們
也歡迎追蹤我們的medium跟Facebook粉絲專頁，讓我們提供你更多優質的無障礙知識跟新知！
本文作者：
Kelly CHI
法文系畢業的前端工程師，致力於打造具有美感和良好用戶體驗的介面，同時也是個愛看冷門電影的骨灰級影迷。
Woody
熱愛學習與開發程式的軟體工程師，對知識充滿好奇心，喜歡與人的互相分享。歡迎來一起協作開發各種 accessibility 專案。
