隱藏及更新內容

隱藏輔助技術的內容

Alice Boxhall
Alice Boxhall
X
Dave Gash
Dave Gash
Meggin Kearney
Meggin Kearney

Aria-隱藏

調整輔助功能體驗的另一個重要技巧 有些技術使用者可能只須確保網頁的相關部分 暴露在輔助技術中。有幾種方法可以 DOM 不會向無障礙功能 API 公開

首先，從 DOM 明確隱藏的任何項目，都不會納入 在無障礙功能樹狀結構中因此只要 CSS 樣式為 visibility: hidden 或 display: none，或使用 HTML5 hidden 屬性，也會如下所示 而不會讓輔助技術使用者看見

但是，如果沒有視覺化呈現，但未明確隱藏的元素， 仍顯示在無障礙樹狀結構中常見的技巧是包括 「僅限螢幕閱讀器文字」放在畫面外的絕對位置元素中

.sr-only {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

此外，如先前所述，您可以透過 aria-label、aria-labelledby 或 aria-describedby 屬性，參照 原本隱藏的元素就好。

參閱這篇關於隱藏技術的 WebAIM 文章 文字 深入瞭解如何建立「僅限螢幕閱讀器」文字。

最後，ARIA 機制能從輔助性中排除內容 透過 aria-hidden 屬性清楚隱藏技術。 將這個屬性套用至元素後，即可有效移除該元素和所有該屬性 無障礙樹狀結構中的子系唯一的例外是 元素 參照 aria-labelledby 或 aria-describedby 屬性

<div class="deck">
    <div class="slide" aria-hidden="true">
    Sales Targets
    </div>
    <div class="slide">
    Quarterly Sales
    </div>
    <div class="slide" aria-hidden="true">
    Action Items
    </div>
</div>

舉例來說，假設您要建立一些強制回應 UI，而該使用 aria-hidden 封鎖存取主頁面的權限。在本例中，視障使用者可能會看到某種類型 半透明重疊元素，代表網頁目前無法 但螢幕閱讀器使用者或許仍可探索 網頁。在此情況下，以及如何建立鍵盤陷阱說明 早期， 首先，請確認網頁上 目前不在測試範圍內的內容 同樣是 aria-hidden

現在您已瞭解 ARIA 的基本概念，因此在導入 ARIA 後如何與原生 HTML 程式碼搭配運作 語意上的成形，以及如何用它來執行極大規模的手術 以及如何變更單一元素的語意 介紹我們如何運用這項功能傳達具時效性的資訊

Aria-Live

aria-live 可讓開發人員將網頁的部分內容標示為「已上線」我們可以理解 無論網頁為何，都必須立即向使用者傳達更新訊息 而非只是讓他們在探索網頁上的該部分時時間 一個元素具有 aria-live 屬性，也就是包含該元素的網頁的一部分，且 子系下稱為「即時區域」

ARIA 即時建立了一個即時區域，

例如，即時區域可能是 當使用者執行動作時訊息是否重要，可以吸引受訪的使用者 重點在於將輔助技術的用戶 關注該事件的 aria-live 屬性。請比較這個一般div

<div class="status">Your message has been sent.</div>

狀態顯示為「上線」

<div class="status" aria-live="polite">Your message has been sent.</div>

aria-live 有三個允許的值：polite、assertive 和 off。

  • aria-live="polite" 會告知輔助技術，提醒使用者這一點 但立即完成當前作業很適合 才是重要卻不急迫的事 使用 aria-live。
  • aria-live="assertive" 會指示輔助技術中斷播放正在觀看的內容 執行更新，並提醒使用者註意這項異動。僅適用於 重要且緊急的更新，例如有些狀態訊息 您的變更並未儲存；請重新整理網頁」，或 會透過使用者動作的直接結果更新輸入欄位，例如 加入「步驟 2」小工具的按鈕
  • aria-live="off" 會指示輔助技術暫時暫停 aria-live 中斷。

只要善用以下技巧，就能確保即時區域運作正常。

首先，你應該在初次載入網頁時設定 aria-live 區域。 這種做法需要快速且有效 aria-live 區域，這可能就是問題。

第二，不同的螢幕閱讀器會回應不同類型的內容 並輸入變更內容例如在部分螢幕閱讀器上觸發快訊 將子系元素的 hidden 樣式從 true 切換為 false。

其他可與 aria-live 搭配使用的屬性可協助您微調 在線上區域變更時向使用者通知。

aria-atomic 表示是否應將整個區域視為 更新私人狀態舉例來說，假設日期小工具包含 日、月、年有 aria-live=true 和 aria-atomic=true，而使用者 使用步進器控制項，只變更月份的值，也就是完整內容 系統會再唸出日期小工具的部分aria-atomic的值可以是 true 或 false (預設值)。

aria-relevant 表示應向使用者顯示的變更類型。 部分選項可以單獨使用，或用做符記清單。

  • addition，會將所有新增至即時區域中的元素都視為 。例如，在現有的狀態記錄中附加時距 訊息的含意，是系統向使用者公告時距 (假設 aria-atomic之前為 false)。
  • text，這表示新增至任何子節點的文字內容 以及相關內容例如，修改自訂文字欄位的 textContent 屬性 會向使用者讀取修改過的文字。
  • 移除，表示移除任何文字或子系節點 要傳達給使用者
  • all，表示所有變更都相關。不過， aria-relevant 為 additions text，亦即在未指定 aria-relevant 會在使用者加入元素時更新使用者， 最有可能的選擇就是

最後，aria-busy 可用來通知應使用的輔助技術 暫時忽略元素變更，例如載入內容時。一次 一切就緒，aria-busy 應設為 false，以便將 讀取器的作業