Question

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

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

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

Answer 1

在Mozilla Developer pages有一些很好的例子。也许他们最好的例子是用于将弹出菜单与父菜单项相关联的位置 - 它是页面中的示例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属性在构建Accessible Rich Internet Applications 方面最有用：只要您坚持使用标准语义HTML - 使用带有标准标签的表单 - 您就不需要它all：所以没有理由在LABEL / INPUT对上使用它。但是如果你从头开始构建“丰富的UI”（DIV和其他低级元素，javascript增加了交互性），那么让屏幕阅读器知道更高级别的意图是必不可少的。

Answer 2

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

在已标记的输入元素上使用“aria-labelledby”的目的是什么？

2 个答案: