accessibility - aria-owns 和 aria-controls 有什么区别

Question

使用时对元素的真正影响是什么

aria-owns="id"

和(!)

aria-controls="id"

当使用这两个属性时，浏览器如何通知屏幕阅读器？

Answer 1

两个aria-controls和 aria-owns当无法从 DOM 层次结构本身确定两个元素之间的关系时使用。
aria-controls旨在表明一个元素控制另一个元素。例如。例如，视频的控制按钮、可视化编辑器的工具栏或可折叠元素的按钮。像下巴这样的屏幕阅读器将宣布一个将视觉焦点移动到元素的快捷方式。这要求元素在视觉流中(没有 display:none )。
aria-owns表示当层次结构无法确定关系时，元素依赖于当前元素。

综上所述，举个例子，如果您有一个包含三个部分的旋转木马:

左边是轮播中每个元素的可点击标题列表，

右边是幻灯片的包装

在底部，下一个和上一个按钮。

结果:

aria-controls将应用于“上一个”或“下一个”等按钮以指向包装器。

aria-owns将应用于标题列表的每个元素以指向包装器内的每个元素。

标题列表中的事件元素将具有 aria-selected属性

预期效果是您可以将屏幕阅读器的视觉焦点移动到确定的元素。