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

问题描述

使用

aria-owns="id"

and（！）

aria-controls="id"

当这两个属性分别为时，浏览器如何通知屏幕阅读器

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

推荐答案

aria-controls 和 aria-owns 。

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 将应用于 上一个或 下一个之类的按钮，以指向包装器。

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选定的属性

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屋！