隱藏及更新內容

隱藏輔助技術的內容

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

aria-hidden

針對輔助技術使用者進行微調時,另一項重要的技巧是確保只有網頁的相關部分會向輔助技術顯示。您可以透過多種方式,確保 DOM 的某個部分不會公開給無障礙 API。

首先,任何在 DOM 中明確隱藏的項目也不會納入無障礙樹狀結構。因此,任何具有 visibility: hiddendisplay: none CSS 樣式,或使用 HTML5 hidden 屬性的內容,都會隱藏在輔助技術使用者眼前。

不過,如果元素未以視覺方式算繪,但未明確隱藏,仍會列入無障礙樹狀結構。常見的做法是在絕對定位在螢幕外部的元素中加入「僅供螢幕閱讀器使用的文字」。

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

此外,如先前所述,透過 aria-labelaria-labelledbyaria-describedby 屬性參照其他以隱藏方式的元素,您或許可以單單提供螢幕閱讀器的文字。

如要進一步瞭解如何建立「僅限螢幕閱讀器」文字,請參閱隱藏文字的技術這篇 WebAIM 文章。

最後,ARIA 提供一種機制,可使用 aria-hidden 屬性,將內容排除在視覺上未隱藏的輔助技術之外。將這個屬性套用至元素,即可有效從無障礙樹狀結構中移除該元素及其所有子項。唯一的例外狀況是 aria-labelledbyaria-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 的基本概念、如何搭配原生 HTML 語意,以及如何透過這種結構對無障礙樹狀結構執行更大規模的手術,並變更單一元素的語意,接著我們就來看看如何利用 ARIA 傳達具時效性的資訊。

Aria-Live

aria-live 可讓開發人員將網頁的部分內容標示為「即時」,也就是無論網頁位置為何,都應立即向使用者傳達更新內容,而不是等到使用者剛好瀏覽該部分內容時才傳達。如果元素具有 aria-live 屬性,則包含該元素的網頁部分及其子係就稱為「即時區域」

ARIA live 建立即時區域。

舉例來說,直播區域可能是使用者操作後顯示的狀態訊息。如果訊息足夠重要,能吸引視障使用者的注意,那麼設定 aria-live 屬性,就能吸引輔助技術使用者的注意。請比較這個一般div

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

與「live」對應。

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

aria-live 有三個允許的值:politeassertiveoff

  • 當裝置正在執行任何作業時,aria-live="polite" 會告知輔助技術使用者留意這項變更。如果某項工作重要但不緊急,且占 aria-live 使用量的大多數,就非常適合使用此類工作。
  • aria-live="assertive" 會通知輔助技術中斷任何操作,並立即通知使用者這項變更。這項功能僅適用於重要且緊急的更新,例如「發生伺服器錯誤,您的變更未儲存;請重新整理頁面」這類狀態訊息,或是使用者操作 (例如步進器小工具上的按鈕) 直接導致的輸入欄位更新。
  • aria-live="off" 會通知輔助技術暫時停止 aria-live 中斷。

您可以透過一些技巧,確保直播區域正常運作。

首先,您應該在初始網頁載入時設定 aria-live 區域。這種做法需要快速執行,但 aria-live 區域發生問題,這可能就是問題所在。

其次,不同類型的螢幕閱讀器會對不同類型的變更做出不同的反應。舉例來說,您可以將子項元素的 hidden 樣式從 true 切換為 false,在某些螢幕閱讀器上觸發警示。

aria-live 支援的其他屬性可協助您微調在直播區域變更時向使用者傳達的內容。

aria-atomic 會指出在傳送更新時,是否應將整個區域視為整體。舉例來說,如果日期小工具包含日期、月份和年份,且有 aria-live=truearia-atomic=true,使用者使用步進控制項只變更月份的值,則系統會再次讀取日期小工具的完整內容。aria-atomic 的值可能是 truefalse (預設值)。

aria-relevant 會指出應向使用者顯示哪些類型的變更。有些選項可單獨使用,或做為符記清單。

  • 新增,表示新增至即時區域的任何元素都很重要。舉例來說,如果您將 span 附加至現有的狀態訊息記錄,就表示 span 會向使用者宣布 (假設 aria-atomicfalse)。
  • text,這表示加入任何子系節點的文字內容都有相關。舉例來說,修改自訂文字欄位的 textContent 屬性,會向使用者朗讀經過修改的文字。
  • 移除,表示應向使用者傳達任何文字或子節點的移除作業。
  • all,表示所有變更都相關。不過,aria-relevant 的預設值是 additions text,也就是說,如果您未指定 aria-relevant,系統會更新使用者對元素的任何新增內容,這也是您最有可能想要的結果。

最後,aria-busy 可讓您通知輔助技術,該技術應暫時忽略元素變更,例如載入內容時。完成所有操作後,aria-busy 應設為 false,以便將讀取器作業正規化。