【英/中,前端】Form <input> elements must have labels每一个元素应当都有一个标签
2023-12-16 21:30:41
原文如下:
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
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!