logo标签列表

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

accessibilitywai-aria
31

使用时对元素的实际影响是什么？

aria-owns="id"

并且（！）

aria-controls="id"

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

3个回答
37

aria-controls和aria-owns都用于当两个元素之间的关系不能从DOM层次结构中确定时。

aria-controls用于指示一个元素控制另一个元素，例如视频控制按钮、可视化编辑器的工具栏或可折叠元素的按钮等。屏幕阅读器（如JAWS）将会宣布一个快捷键，以将可视焦点移动到该元素上。这需要该元素在可视流中（没有display:none）。

aria-owns用于指示当关系不能由层次结构确定时，一个元素依赖于当前元素。

总之，举个例子，如果您有一个带有三个部分的旋转木马：

  • 左侧是旋转木马中每个元素的可点击标题列表，
  • 右侧是轮播图包装器
  • 底部是下一个和前一个按钮。

结果：

  1. aria-controls将应用于像“previous”或“next”之类的按钮，以指向包装器。

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

  3. 标题列表中的活动元素将具有aria-selected属性。

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

这似乎对屏幕阅读器没有影响，关于 aria-owns。这是错误的。我构建了一个组合框组件，依赖于 aria-owns 来让屏幕阅读器正确地朗读列表框中突出显示的选项。如果没有它，屏幕阅读器将无法正常工作。 - ericgio
@ericgio 谢谢您的反馈。自2015年以来，屏幕阅读器有了很大的改进。 - Adam
16
-owns 和 -controls 的区别在于，-owns 会创建一个原本不存在的父子关系，而 -controls 则表示一个东西控制另一个东西。所以A可以控制B，但那并不意味着A必须是B的父亲。 leonie watson
3
我们发现这一点在2020年尤为重要，因为浏览器和屏幕阅读器正在增加对aria-owns的支持并破坏用户体验。请检查您的代码中的aria-owns，并确保您没有意味着aria-controls。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接