Html 在已标记的输入元素上使用“aria-labelledby”的目的是什么?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/11152323/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
The purpose of using "aria-labelledby" on already labeled input elements?
提问by Ian Y.
Many ARIA demonstration websites use code such as:
许多 ARIA 演示网站使用如下代码:
<label for="name" id="label-name">Your Name</label>
<input id="name" aria-labelledby="label-name" type="text">
But what's the purpose of using aria-labelledby
attribute in this case? The input
element has already been labeled by the label
element which is using for
attribute, isn't it?
但是aria-labelledby
在这种情况下使用属性的目的是什么?该input
元素已经被贴上由label
这是使用元素for
的属性,是不是?
采纳答案by BrendanMcK
There's some good examples of its use at Mozilla Developer pages. Perhaps the best of their examples is where it's used to associate a popup menu with the parent menu item - it's Example 7 in the page:
在Mozilla 开发人员页面有一些很好的例子说明它的使用。也许他们最好的例子是它用于将弹出菜单与父菜单项相关联 - 这是页面中的示例 7:
<div role="menubar">
<div role="menuitem" aria-haspopup="true" id="fileMenu">File</div>
<div role="menu" aria-labelledby="fileMenu">
<div role="menuitem">Open</div>
<div role="menuitem">Save</div>
<div role="menuitem">Save as ...</div>
...
</div>
...
ARIA attributes tends to be of greatest use in building Accessible Rich Internet Applications: so long as you're sticking with standard semantic HTML - using forms with standards labels - you shouldn't need it at all: so there's no reason to use it on a LABEL/INPUT pair. But if you're building "rich UI" from scratch (DIVs and other low level elements with javascript adding interactivity), then it's essential for letting a screenreader know what the higher-level intent is.
ARIA 属性往往在构建可访问的富 Internet 应用程序中最有用:只要您坚持使用标准语义 HTML - 使用带有标准标签的表单 - 您根本不需要它:所以没有理由在一个标签/输入对。但是,如果您从头开始构建“丰富的 UI”(DIV 和其他使用 JavaScript 添加交互性的低级元素),那么让屏幕阅读器知道更高级别的意图是必不可少的。
回答by user2323922
There is always UA support issues with anything new so that is why developers look to the progressive enhancement. This ARIA technique provides the ability to do away with the “for” attribute and allows other elements to become part of the rich form. These techniques will become common practice.
任何新事物总是存在 UA 支持问题,因此这就是开发人员寻求渐进增强的原因。这种 ARIA 技术提供了取消“for”属性的能力,并允许其他元素成为丰富表单的一部分。这些技术将成为普遍做法。