【英/中,前端】Form ＜input＞ elements must have labels每一个元素应当都有一个标签

本文主要是介绍【英/中,前端】Form ＜input＞ elements must have labels每一个元素应当都有一个标签，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

原文如下：
Form elements must have labels | Axe Rules | Deque University | Deque Systems

编程式的关联标签和窗体控件。
下面以推荐程度从高到低依次排列，使用label元素->使用for和id属性显示关联，就这样。
label标签的包裹 or 不包裹

<label for="firstname">First name:</label> <input type="text" id="firstname">

<label>First name: <input type="text"></label>

（这个不是很懂）

If the input is already labeled visually some other way, such as through a magnifying glass icon on a search submit button, it may be acceptable to use aria-label to create an invisible text label for screen readers to read.

好像是如果标签已经定义过，就采用这个属性隐式的表示。

<input type="text" aria-label="Search">

另一种方法(有时在添加 < label > 标签会破坏功能或样式，或者当多个标签应用于同一输入时使用)是使用 aria-labelledby 代替:

<div id="firstname">First name:</div> <input type="text" aria-labelledby="firstname">

<!--visual labels may be elsewhere in the content, such as in table headers-->  
<div id="temperature">Temperature:</div>  
<div id="high">High:</div>  
<div id="low">Low:</div>  
<!-- the inputs -->  
<input type="text" aria-labelledby="temperature low">  
<input type="text" aria-labelledby="temperature high">

最后可以使用placeholder属性提供可访问名称。

<input type="text" placeholder="Search">

看明白了，是为了让用户能更好的理解按钮、输入等的功能，而且也是为了残障人士的使用体验。

例外：按钮和隐藏输入是特殊的存在，没有必须标签的要求

感动

这篇关于【英/中,前端】Form ＜input＞ elements must have labels每一个元素应当都有一个标签的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---