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 |