Accessibility aria控件和aria控件之间的区别是什么

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

aria-owns="id"

和（！）

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

-owns和-controls之间的区别在于-owns创建一个不存在的父/子关系，而-controls表示一件事控制另一件事。 所以A可以控制B，但A不一定是B的父对象

---

当无法从DOM层次结构本身确定两个元素之间的关系时，将同时使用

aria控件

和

aria拥有的

aria controls

用于指示一个元素控制另一个元素。例如，用于视频的控制按钮，用于视觉编辑器的工具栏或用于可折叠元素的按钮。像jaws这样的屏幕阅读器将宣布一个快捷方式，将视觉焦点移动到元素上。这要求元素位于可视流中（无

display:none

）

aria owns

表示当层次结构无法确定关系时，元素依赖于当前元素

综上所述，举个例子，如果您有一个由三部分组成的旋转木马：

• 在左侧，旋转木马中每个元素的可单击标题列表
• 右边是幻灯片的包装
• 在底部，单击“下一步”和“上一步”按钮

结果:

aria控件

将应用于“previous”或“next”等按钮，以指向包装器

aria-owns

将应用于标题列表的每个元素，以指向包装器中的每个元素

标题列表中的活动元素将选择

aria

属性

---

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

我们发现这一点在2020年尤为重要，因为浏览器和屏幕阅读器正在增加对aria的支持并打破用户体验。请检查您的代码中是否有aria拥有，并确保您不是指aria控件

“这似乎对屏幕阅读器没有影响”re:

aria拥有的

。这是错误的。我构建了一个组合框组件，该组件依赖于

aria拥有的

，以便屏幕阅读器正确读取列表框中突出显示的选项。没有它，屏幕阅读器无法正常工作。@ericgio感谢您的反馈。自2015年以来，屏幕阅读器取得了巨大的进步

aria-controls="id"