ARIA 標籤和關係

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

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

ARIA 提供數種機制,可為元素新增標籤和說明。事實上,ARIA 是你唯一要新增無障礙說明或說明文字的方法。現在來看看 ARIA 用來建立無障礙標籤的屬性。

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

如果您有某種視覺元素來呈現元素用途 (例如使用圖形而非文字的按鈕),但仍需要針對無法存取視覺指標的任何使用者 (例如僅使用圖片表明用途的按鈕) 清楚說明此目的,就可以使用 aria-label 屬性。

使用 aria 標籤識別僅限圖片的按鈕。

Aria-Labelledby

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

使用 aria labelledby 來識別無線電群組。

這與使用 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-labelledbyaria-label,或是 aria-labelledby 和原生 HTML label,系統會一律優先採用 aria-labelledby 標籤。

情感關係

aria-labelledby關係屬性的示例。關係屬性會為網頁上的元素建立語意關係,無論元素與 DOM 的關係為何。以 aria-labelledby 為例,該關係即為「這個元素已由該元素加上標籤」。

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

Aria-擁有

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

使用 Aria-own 建立選單和子選單之間的關係。

Aria-活躍的下一代

aria-activedescendant扮演相關角色。就像網頁已啟用的元素是聚焦元素一樣,設定元素的有效子系一樣,可讓輔助技術告知輔助技術,當父項確實具有焦點時,該元素應以焦點元素向使用者顯示。舉例來說,在 listbox 中,您可能會想要將頁面焦點放在清單方塊容器上,但繼續將其 aria-activedescendant 屬性更新為目前選取的清單項目。這會讓目前選取的項目看起來像是焦點項目。

使用 aria-activedescendant 建立清單箱中的關係。

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 是先出現在 DOM 中的情況,然後使用動態 HTML 技術,確保使用者可以視需要探索完整清單。

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