【英/中,前端】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">

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

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

感动

  • 6
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ljl2107

感谢我能帮助到你

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值