aria-owns 和 aria-controls 有什么区别
What is the difference between aria-owns and aria-controls
使用时对元素的真正影响是什么
aria-owns="id"
和（！）
aria-controls="id"
当使用这两个属性时，浏览器如何通知屏幕阅读器？
The difference between -owns and -controls is that -owns creates a parent/child relationship where none exists, and -controls indicates that one thing controls the other.
So A can control B, but A doesn't have to be a parent of B for that to be the case.
当无法从 DOM 层次结构本身确定两个元素之间的关系时，将使用 aria-controls 和 aria-owns。
aria-controls 旨在表示一个元素控制另一个元素。 例如例如视频的控制按钮、可视化编辑器的工具栏或可折叠元素的按钮。 像 jaws 这样的屏幕阅读器会宣布一个将视觉焦点移动到元素的快捷方式。这要求元素在视觉流中（没有display:none）。
aria-owns表示当层次结构无法确定关系时，元素依赖于当前元素。
总结一下，举个例子，如果你有一个由三部分组成的轮播：
- 左边是轮播中每个元素的可点击标题列表，
- 右边是幻灯片的包装纸
- 在底部，下一个和上一个按钮。
结果：
aria-controls 将应用于“previous”或“next”等按钮以指向到包装器。
aria-owns 将应用于标题列表的每个元素以指向包装器内的每个元素。
标题列表中的活动元素将具有 aria-selected 属性
预期效果是您可以将屏幕阅读器的视觉焦点移动到确定的元素。
我们发现这在 2020 年尤为重要，因为浏览器和屏幕阅读器正在增加对 aria-owns 的支持并破坏用户体验。请检查您的 aria-owns 代码，并确保您不是指 aria-controls。
使用时对元素的真正影响是什么
aria-owns="id"
和（！）
aria-controls="id"
当使用这两个属性时，浏览器如何通知屏幕阅读器？
The difference between -owns and -controls is that -owns creates a parent/child relationship where none exists, and -controls indicates that one thing controls the other. So A can control B, but A doesn't have to be a parent of B for that to be the case.
当无法从 DOM 层次结构本身确定两个元素之间的关系时，将使用 aria-controls 和 aria-owns。
aria-controls 旨在表示一个元素控制另一个元素。 例如例如视频的控制按钮、可视化编辑器的工具栏或可折叠元素的按钮。 像 jaws 这样的屏幕阅读器会宣布一个将视觉焦点移动到元素的快捷方式。这要求元素在视觉流中（没有display:none）。
aria-owns表示当层次结构无法确定关系时，元素依赖于当前元素。
总结一下，举个例子，如果你有一个由三部分组成的轮播：
- 左边是轮播中每个元素的可点击标题列表，
- 右边是幻灯片的包装纸
- 在底部，下一个和上一个按钮。
结果：
aria-controls将应用于“previous”或“next”等按钮以指向到包装器。aria-owns将应用于标题列表的每个元素以指向包装器内的每个元素。标题列表中的活动元素将具有
aria-selected属性
预期效果是您可以将屏幕阅读器的视觉焦点移动到确定的元素。
我们发现这在 2020 年尤为重要，因为浏览器和屏幕阅读器正在增加对 aria-owns 的支持并破坏用户体验。请检查您的 aria-owns 代码，并确保您不是指 aria-controls。