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

许多 ARIA 示范网站使用以下代码:

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

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

74586

小开

最佳答案

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:

<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.