ARIA 標籤和關係

使用 ARIA 標籤建立無障礙元素說明

艾麗絲帕克哈爾
Alice Boxhall
X
戴夫加什
Dave Gash
米金凱爾尼
Meggin Kearney

標籤

ARIA 提供數種機制，可將標籤和說明新增至元素。事實上，只有 ARIA 是新增無障礙說明或說明文字的唯一方法。接著我們來看看 ARIA 使用的屬性來建立可存取的標籤。

Aria 標籤

aria-label 可讓您指定要做為存取標籤的字串。這會覆寫任何其他原生標籤機制，例如 label 元素。舉例來說，如果 button 同時包含文字內容和 aria-label，系統只會使用 aria-label 值。

當您有某種視覺描述元素用途時 (例如使用圖形而非文字的按鈕)，但仍需向無法存取視覺指標的使用者說明此用途，例如只使用圖片表示其用途的按鈕，就可以使用 aria-label 屬性。

使用 aria 標籤來指定只含圖片的按鈕。

aria-labelledby

aria-labelledby 可讓我們將 DOM 中另一個元素的 ID 指定為元素的標籤。

使用 aria 標籤來識別圓形按鈕群組。

這就像使用 label 元素，但有一些主要差異。

  1. aria-labelledby 可用於任何元素，不限於可加上標籤的元素。
  2. 雖然 label 元素是指標籤的內容，但就 aria-labelledby 的情況而言，關係則會反轉，而要加上標籤的項目指的是加上標籤的項目。
  3. 一個標籤元素只能與一個標籤元素建立關聯，但 aria-labelledby 可以採用 IDREF 清單從多個元素撰寫標籤。標籤會按照 IDREF 提供的順序串連。
  4. 您可以使用 aria-labelledby 參照隱藏的元素，否則不在無障礙樹狀結構中。舉例來說，您可以在要加上標籤的元素旁邊新增隱藏的 span，然後使用 aria-labelledby 參照該元素。
  5. 不過，由於 ARIA 只會影響無障礙功能樹狀結構，因此 aria-labelledby 並不提供您使用 label 元素時熟悉的標籤點選行為。

請注意，aria-labelledby 會覆寫元素的「所有」其他名稱來源。因此，舉例來說，如果元素同時包含 aria-labelledby 和 aria-label，或是 aria-labelledby 和原生 HTML label，系統一律會優先採用 aria-labelledby 標籤。

情感關係

aria-labelledby 是關係屬性的例子。無論元素 DOM 關聯為何，關係屬性都會建立網頁上元素之間的語意關係。如果是 aria-labelledby，則關係為「這個元素已由該元素加上標籤」。

ARIA 規格會列出八個關係屬性。其中六個 (aria-activedescendant、aria-controls、aria-describedby、aria-labelledby 和 aria-owns) 會參照一或多個元素，在頁面上的元素之間建立新連結。這兩種情況的差異在於該連結代表的意義，以及對使用者呈現的方式。

Aria-own

aria-owns 是最廣泛使用的 ARIA 關係之一。這項屬性可讓我們告知輔助技術，在 DOM 中獨立的元素應視為目前元素的子項，或者將現有的子項元素重新排列成不同的順序。舉例來說，如果彈出式子選單以視覺方式放置在父項選單附近，但不能是其父項的 DOM 子項，因為這會影響視覺呈現，您可以使用 aria-owns 將子選單顯示為螢幕閱讀器的父項選單子項。

使用 ariaowns 建立菜單和子選單之間的關係。

亞利桑那-活性後院

aria-activedescendant 扮演了相關角色。就像網頁正在使用中的元素是焦點，設定元素的子系，可讓輔助技術告訴輔助技術，當其父項實際有焦點時，該元素應呈現為使用者聚焦的元素。例如，在清單方塊內，您可能要讓頁面焦點留在 listbox 容器上，但請將 aria-activedescendant 屬性更新為目前選取的清單項目。這會讓目前選取的項目看起來就像是焦點項目，因此看起來會像輔助技術一樣。

使用 aria-activeescendant 在清單方塊內建立關係。

aria-describedby

aria-describedby 會提供易於存取的說明，方法與 aria-labelledby 提供標籤的方式相同。和 aria-labelledby 一樣，aria-describedby 可能會參照其他看不到的元素，包括隱藏在 DOM 或輔助技術使用者之外。如果使用者可能需要一些額外的說明文字 (無論是套用到輔助技術的使用者或所有使用者)，都可以使用這項技巧。

常見的例子是密碼輸入欄位，其中包含一些說明最低密碼需求的說明文字。與標籤不同，此說明不一定能向使用者顯示；使用者可以選擇是否存取說明，或可能在所有其他資訊的後面顯示，或被其他資訊先佔。例如，如果使用者輸入資訊，系統會將其輸入內容傳回回音，並可能會中斷元素的說明。因此，說明是傳達補充資訊的絕佳方式，但並非必要資訊；說明不會幹擾元素的角色等更重要資訊。

使用 aria-describedby 建立與密碼欄位的關係。

Aria-posinset 和 Aria-setsize

其餘的關係屬性會稍有不同，並可搭配運作。 aria-posinset (「在組合中的位置」) 和 aria-setsize (「組合的大小」) 會定義組合中同層級元素 (例如清單) 之間的關係。

當集合大小無法由 DOM 中顯示的元素決定時 (例如使用延遲算繪來避免在 DOM 中一次擁有所有大型清單時)，aria-setsize 可以指定實際的組合大小，而 aria-posinset 可以指定元素在組合中的位置。舉例來說，在可能包含 1000 個元素的集合中，您可以假設特定元素的 aria-posinset 是 857 (即使該元素先顯示在 DOM 中)，然後使用動態 HTML 技術，確保使用者能視需求探索完整清單。

使用 aria-posinset 和 aria-setsize 在清單中建立關係。