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。