aria-owns
aria-owns 屬性用於識別一個或多個元素，以便在父元素與其子元素之間定義視覺、功能或上下文關係，當 DOM 層次結構無法用於表示這種關係時。
描述
每個元素都是另一個元素的父級、同級或子級。由 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中引用的元素。
可以透過在 aria-owns 值中包含對實際 DOM 子級的 ID 參考來更改此順序。
order 屬性（flex 或 grid 佈局的一部分）可用於更改 flex 和 grid 專案的順序，使其顯示順序與其在源文件中的順序不同，從而導致元素的邏輯順序出現偏差。雖然可能很想將無障礙訪問層排序以匹配使用 CSS order 屬性建立的順序更改，但避免同時使用 order 屬性和 aria-owns 屬性是最佳選擇。
確保你的擁有元素只有一個所有者。不要在一個以上其他元素的 aria-owns 屬性中指定某個元素的 id。一個元素只能有一個所有者。
警告：雖然aria-owns 現在已在所有現代瀏覽器中得到支援，但在 iOS 17.3 和 macOS 14.3 之前的版本中，使用 VoiceOver 的 MacOS 和 iOS 使用者可能無法訪問 aria-owns。
值
id列表-
空格分隔的一個或多個 ID 值列表，引用當前元素擁有的元素
關聯角色
用於**所有**角色。
規範
| 規範 |
|---|
| 可訪問的富網際網路應用程式 (WAI-ARIA) # aria-owns |