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

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页面上有一些很好的例子.也许最好的例子是它用于将弹出菜单与父菜单项相关联 - 它是页面中的示例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 - 使用带有标准标签的表单 - 您根本不需要它:所以没有理由在它上面使用它LABEL/INPUT对.但是如果你从头开始构建"丰富的UI"(DIV和其他低级元素,javascript增加交互性),那么让屏幕阅读器知道更高级别的意图是至关重要的.