ARIA: aria-owns 屬性

描述

每個元素都是另一個元素的父元素、同級元素或子元素。由 HTML 元素和文字節點組成的文件物件是 DOM 樹的基礎。可訪問性物件模型 (AOM) 依賴於構建良好的 DOM，以便輔助技術能夠向用戶傳達有關文件內容的有意義資訊。

由於 JavaScript 能夠修改內容，CSS 能夠修改佈局，因此在某些情況下，螢幕上顯示的佈局可能與底層 DOM 結構不同。在這種情況下，可以使用 aria-owns 屬性為使用 DOM 的輔助技術重新建立有意義的關係。

當元素在視覺上看起來相關，但在 DOM 中未關聯時，aria-owns 屬性可以在可訪問性層中為輔助技術建立螢幕上顯示的關係。包含 aria-owns 的唯一理由是在 DOM 結構無法提供父子上下文關係時，將這種關係暴露給輔助技術。

“擁有元素”是元素的任何 DOM 祖先。如果一個元素在視覺、功能或上下文上似乎“擁有”（即是某個元素的祖先）另一個元素，但實際上在 DOM 中不是該元素的祖先，則應包含 aria-owns 來建立這種關係。將該屬性新增到擁有元素上，並引用非子擁有元素（或元素），以告知輔助技術應將某個元素視為子元素。

透過引用一個或多個元素的 ID，任何元素都可以“擁有”另一個元素，前提是聲明瞭 aria-owns。aria-owns 屬性的值是一個空格分隔的 ID 引用列表，引用文件中一個或多個元素的 ID。

注意：“被擁有的元素”是元素的任何 DOM 後代，透過 aria-owns 指定的任何子元素，或被擁有的子元素的任何 DOM 後代。aria-owns 所擁有的元素應該屬於 DOM 中一個獨立的父樹，但應被視為當前元素的子元素。

不要使用 aria-owns 來替代 DOM 層級結構。如果關係已在 DOM 中表示，請勿使用 aria-owns。

預設情況下，子元素由其 DOM 父元素擁有：在這種情況下，不應使用 aria-owns。避免使用 aria-owns 屬性來重新排列現有子元素，使其順序不同。

使用 aria-owns 時，請確保您管理焦點順序。確保視覺焦點順序與輔助技術的讀取順序匹配。

aria-owns 的一個使用示例是彈出式子選單，這些子選單在視覺上似乎靠近父選單，但由於會影響視覺呈現，因此無法在 DOM 中巢狀在父選單內。在這種情況下，請使用 aria-owns 將子選單呈現為父選單的子級，以便螢幕閱讀器能夠識別。

注意： aria-owns 屬性僅應用於無法從 DOM 確定父子關係的場景。

如果一個元素同時擁有 aria-owns 和 DOM 子元素，則子元素的順序為

首先是實際的 DOM 子元素，
然後是 aria-owns 中引用的元素。

透過將實際 DOM 子元素的 ID 引用包含在 aria-owns 值中，可以更改此順序。

order 屬性是 flex 或 grid 佈局的一部分，可用於更改 flex 和 grid 項的順序，使其與源文件中的順序不同，從而導致元素邏輯順序的差異。雖然可能會試圖使可訪問性層與使用 CSS order 屬性建立的順序更改相匹配，但最好避免使用 order 屬性和 aria-owns 屬性。

確保您的被擁有的元素只有一個所有者。請勿在一個以上的其他元素的 aria-owns 屬性中指定元素的 id。一個元素只能有一個所有者。

警告： 儘管所有現代瀏覽器都已支援 aria-owns，但在 iOS 17.3 和 macOS 14.3 之前的版本中，macOS 和 iOS 上的 VoiceOver 使用者可能無法識別 aria-owns。