aria-owns 和 aria-controls 有什么区别 [英] What is the difference between aria-owns and aria-controls

问题描述

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

What is the real impact on an element when using

aria-owns="id"

和(！)

aria-controls="id"

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

How do the browsers notify the screen readers when these two attributes are used?

推荐答案

aria-controls 和 aria-owns 当两个元素之间的关系可以't 由 DOM 层次结构本身确定.

Both aria-controls and aria-owns are used when the relation between the two element can't be determined from the DOM hierarchy itself.

aria-controls 旨在指示一个元素控制另一个元素.例如例如，用于视频的控制按钮、用于可视化编辑器的工具栏或用于可折叠元素的按钮. 屏幕阅读器(例如下巴)将宣布将视觉焦点移动到元素的快捷方式.这要求元素在视觉流中(没有 display:none).

aria-controls is intended to indicate that an element controls another one. E.g. control buttons for a video for instance, a toolbar for a visual editor or a button for a collapsible element. Screen readers like jaws will announce a shortcut to move the visual focus to the element. This requires the element to be in the visual flow (no display:none).

aria-owns 表示当关系不能由层次结构确定时，元素依赖于当前元素.

aria-owns indicate that an element depends on the current one when the relation can't be determined by the hierarchy structure.

总结一下，举个例子，如果你有一个由三部分组成的轮播:

To sum up, with an example, if you have a carousel with three parts:

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

结果:

1. aria-controls 将应用于previous"或next"等按钮以指向包装器.

1. aria-controls will be applied to buttons like "previous" or "next" to point to the wrapper.

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

aria-owns will be applied to each element of the title list to point to each element inside the wrapper.

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

the active element in the title list would have the aria-selected attribute

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

The intended effect is that you could move the visual focus of your screenreader to the determined element.

这篇关于aria-owns 和 aria-controls 有什么区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！