咏叹调和咏叹调控制有什么区别

Question

使用

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

aria-owns="id"

和（！）

aria-controls="id"

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

Answer 1

当两个元素之间的关系无法从DOM层次结构本身确定时，使用aria-controls和aria-owns。

aria-controls旨在表示元素控制另一个元素。 E.g。例如，视频的控制按钮，可视化编辑器的工具栏或可折叠元素的按钮。屏幕阅读器（如下颚）将宣布将视觉焦点移动到元素的快捷方式。这要求元素处于可视流程中（无display:none）。

aria-owns表示当关系不能由层次结构确定时，元素取决于当前元素。

总结一下，如果您有一个包含三个部分的轮播，请举例：

• 左侧是轮播中每个元素的可点击标题列表，
• 右侧是幻灯片的包装
• 位于底部，下一个和上一个按钮。

结果：

1. aria-controls将应用于＆＃34; 之前的＆＃34;等按钮或者＆＃34; 下一个＆＃34;指向包装器。

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

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

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

Answer 2

  

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

leonie watson

Answer 3

我们发现，这在2020年尤为重要，因为浏览器和屏幕阅读器正日益增加对咏叹调拥有者的支持，并打破了用户体验。请检查您的aria-owns代码，并确保您不是故意要使用aria-controls。