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

发布时间:2023年12月17日

原文如下:
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">

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

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

感动

文章来源:https://blog.csdn.net/m0_63288666/article/details/135037523
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。