使用“咏叹调标签”的目的在于，在已标记的输入元素上？

问题描述

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

 < label for =nameid =label-name >你的名字< / label> 
< input id =namearia-labelledby =label-nametype =text> 
  

但是，使用 aria-在这种情况下labelledby 属性？ 输入元素已经被标签元素标记，元素用于 c $ c>属性，不是吗？

解决方案

。也许他们最好的例子是它用来关联一个弹出式菜单和父菜单项的地方 - 它是页面中的例7：

 < div role =menubar> 
< div role =menuitemaria-haspopup =trueid =fileMenu>文件< / div> 
< div role =menuaria-labelledby =fileMenu> 
< div role =menuitem>打开< / div> 
< div role =menuitem>保存< / div> 
< div role =menuitem>另存为...< / div> 
 ... 
< / div> 
 ... 
  

只要您坚持使用标准语义HTML - 使用带有标准标签的表单 - 您应该完全不需要它：> ARIA属性在构建可访问互联网应用程序中最为有用：：所以没有理由在LABEL / INPUT对上使用它。但是如果你从头开始构建富UI（DIV和其他低级别元素，并增加了交互性），那么让屏幕阅读器知道更高层次的意图是至关重要的。

Many ARIA demonstration websites use code such as:

<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-labelledby attribute in this case? The input element has already been labeled by the label element which is using for attribute, isn't it?

解决方案

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.

这篇关于使用“咏叹调标签”的目的在于，在已标记的输入元素上？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！