87

许多 ARIA 演示网站使用以下代码：

<label for="name" id="label-name">Your Name</label>
<input id="name" aria-labelledby="label-name" type="text">


但是aria-labelledby在这种情况下使用属性的目的是什么？该input元素已经被label使用for属性的元素标记了，不是吗？

4

2 回答 2

71

在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 属性往往在构建可访问的富 Internet 应用程序中最有用：只要您坚持使用标准语义 HTML - 使用带有标准标签的表单 - 您根本不需要它：所以没有理由使用它一个标签/输入对。但是，如果您是从头开始构建“丰富的 UI”（DIV 和其他带有 javascript 添加交互性的低级元素），那么让屏幕阅读器知道更高级别的意图是必不可少的。

于 2012-06-22T20:13:55.197 回答
3

任何新事物总是存在 UA 支持问题，这就是开发人员寻求渐进增强的原因。这种 ARIA 技术提供了取消“for”属性并允许其他元素成为丰富表单的一部分的能力。这些技术将成为普遍做法。

于 2013-06-13T15:40:36.983 回答