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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 01:13:02  来源:igfitidea点击:

The purpose of using "aria-labelledby" on already labeled input elements?

htmllabelaccessibilitywai-aria

提问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-labelledbyattribute in this case? The inputelement has already been labeled by the labelelement which is using forattribute, 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”属性的能力,并允许其他元素成为丰富表单的一部分。这些技术将成为普遍做法。