使用 ARIA 標籤建立無障礙元素說明
標籤
ARIA 提供數種機制,可將標籤和說明新增至元素。事實上,只有 ARIA 是新增無障礙說明或說明文字的唯一方法。接著我們來看看 ARIA 使用的屬性來建立可存取的標籤。
Aria 標籤
aria-label
可讓您指定要做為存取標籤的字串。這會覆寫任何其他原生標籤機制,例如 label
元素。舉例來說,如果 button
同時包含文字內容和 aria-label
,系統只會使用 aria-label
值。
當您有某種視覺描述元素用途時 (例如使用圖形而非文字的按鈕),但仍需向無法存取視覺指標的使用者說明此用途,例如只使用圖片表示其用途的按鈕,就可以使用 aria-label
屬性。
aria-labelledby
aria-labelledby
可讓我們將 DOM 中另一個元素的 ID 指定為元素的標籤。
這就像使用 label
元素,但有一些主要差異。
aria-labelledby
可用於任何元素,不限於可加上標籤的元素。- 雖然
label
元素是指標籤的內容,但就aria-labelledby
的情況而言,關係則會反轉,而要加上標籤的項目指的是加上標籤的項目。 - 一個標籤元素只能與一個標籤元素建立關聯,但
aria-labelledby
可以採用 IDREF 清單從多個元素撰寫標籤。標籤會按照 IDREF 提供的順序串連。 - 您可以使用
aria-labelledby
參照隱藏的元素,否則不在無障礙樹狀結構中。舉例來說,您可以在要加上標籤的元素旁邊新增隱藏的span
,然後使用aria-labelledby
參照該元素。 - 不過,由於 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
將子選單顯示為螢幕閱讀器的父項選單子項。
亞利桑那-活性後院
aria-activedescendant
扮演了相關角色。就像網頁正在使用中的元素是焦點,設定元素的子系,可讓輔助技術告訴輔助技術,當其父項實際有焦點時,該元素應呈現為使用者聚焦的元素。例如,在清單方塊內,您可能要讓頁面焦點留在 listbox 容器上,但請將 aria-activedescendant
屬性更新為目前選取的清單項目。這會讓目前選取的項目看起來就像是焦點項目,因此看起來會像輔助技術一樣。
aria-describedby
aria-describedby
會提供易於存取的說明,方法與 aria-labelledby
提供標籤的方式相同。和 aria-labelledby
一樣,aria-describedby
可能會參照其他看不到的元素,包括隱藏在 DOM 或輔助技術使用者之外。如果使用者可能需要一些額外的說明文字 (無論是套用到輔助技術的使用者或所有使用者),都可以使用這項技巧。
常見的例子是密碼輸入欄位,其中包含一些說明最低密碼需求的說明文字。與標籤不同,此說明不一定能向使用者顯示;使用者可以選擇是否存取說明,或可能在所有其他資訊的後面顯示,或被其他資訊先佔。例如,如果使用者輸入資訊,系統會將其輸入內容傳回回音,並可能會中斷元素的說明。因此,說明是傳達補充資訊的絕佳方式,但並非必要資訊;說明不會幹擾元素的角色等更重要資訊。
Aria-posinset 和 Aria-setsize
其餘的關係屬性會稍有不同,並可搭配運作。
aria-posinset
(「在組合中的位置」) 和 aria-setsize
(「組合的大小」) 會定義組合中同層級元素 (例如清單) 之間的關係。
當集合大小無法由 DOM 中顯示的元素決定時 (例如使用延遲算繪來避免在 DOM 中一次擁有所有大型清單時),aria-setsize
可以指定實際的組合大小,而 aria-posinset
可以指定元素在組合中的位置。舉例來說,在可能包含 1000 個元素的集合中,您可以假設特定元素的 aria-posinset
是 857 (即使該元素先顯示在 DOM 中),然後使用動態 HTML 技術,確保使用者能視需求探索完整清單。