(翻译)复选框需要绑定标签的原因

  设计人员思考表单设计方式时,他们通常只想到文本字段和提交按钮,由于复选框用得不多,它们经常被忽视,是忽视复选框会影响用户填写表单。设计人员应更加注意复选框的使用方式,很多复选框都很难点击,这违反了可达性原则。

可点击的复选框标签

  所有复选框都有标签,但不是每个复选框都使用标签。这使得用户很难勾选复选框。 没有标签,用户无法单击标签来勾选复选框,相反,他们必须单击复选框本身。 由于复选框目标很小,这让用户,尤其是有运动障碍的用户,点击起来很费力。
在这里插入图片描述
  当复选框绑定标签后,用户点击标签就能勾选复选框。标签的目标较大,用户点击起来不费力,能快速完成勾选操作。复选框绑定标签的做法也更直观,用户期望点击元素标签就能激活元素,他们使用菜单和按钮时就是这么做的。
在这里插入图片描述

屏幕阅读器可达性

  屏幕阅读器中无法使用未绑定标签的复选框,它无法根据位置识别标签和复选框的关联关系,这使得屏幕阅读器将标签和复选框分开读给用户听。
  用户很难弄清楚标签和复选框的关联关系。但如果复选框绑定了标签,屏幕阅读器就能正确的读出每个复选框关联的标签。
  标签像是所有表单元素的锚点,它不仅适用于复选框,还可用于所有具有标签的表单元素,用户点击标签就可以激活表单元素。
  当要做的只是增加一小段代码时,提高用户体验也费不了多少事儿。让复选框标签具备可点击性,不仅给有运动障碍的用户带来奇迹,对网站的所有用户都有好处。

原文地址:https://uxmovement.com/forms/why-your-checkboxes-need-to-have-label-tags/

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值