博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
label标签的可访问性问题
阅读量:5754 次
发布时间:2019-06-18

本文共 554 字,大约阅读时间需要 1 分钟。

label标签可以优雅地扩大表单控件元素的点击区域。例如,单纯的单选框点击区域就鼻屎那么大的地方,经常会点不到位置。因此,label标签的使用对于提高页面的可用性可访问性是很有帮助的。

其实,它的样子就是

1121495-20170601174827102-1368092478.png

网易云课堂就是这么做的

1121495-20170601173819383-511894914.png
还有其他的网站(盗图的,哈哈)
1121495-20170601173853602-1766697856.png

我们一般有两种方法来优雅地扩展表单控件的点击区域。

  1. 其一是使用label标签包裹控件元素
  2. 另外的方法就是使用label标签的for属性与控件元素的id相关联。

这就意味着,我们可以有如下些做法:

  • 使用for和id关联控件

  • label标签包裹控件

  • 双管齐下

基本上,在大部分浏览器下(IE6下label标签包裹控件的方法是不顶用的),三个方法都是可以扩大单行文本框控件的点击区域的(点击“标签”二字,文本框即focus)。

1121495-20170601174317024-1074776018.png

使用for和id找到控件元素的方法要比将控标件放在label签内的健壮性好很多。建议使用for + id方法,而不要因为懒得蛋疼乳酸,直接把控件元素套在label标签之下。也不要使用看上去更保险的“双管齐下”的方法。

整片博客内容是从 张鑫旭大神那里借鉴来的,—>_—>

转载于:https://www.cnblogs.com/xiaqilin/p/6930035.html

你可能感兴趣的文章
hive_0.11中文用户手册
查看>>
hiveserver2修改线程数
查看>>
XML教程
查看>>
oracle体系结构
查看>>
Microsoft Exchange Server 2010与Office 365混合部署升级到Exchange Server 2016混合部署汇总...
查看>>
Proxy服务器配置_Squid
查看>>
开启“无线网络”,提示:请启动windows零配置wzc服务
查看>>
【SDN】Openflow协议中对LLDP算法的理解--如何判断非OF区域的存在
查看>>
纯DIV+CSS简单实现Tab选项卡左右切换效果
查看>>
栈(一)
查看>>
ios 自定义delegate(一)
查看>>
创建美国地区的appleId
查看>>
例题10-2 UVa12169 Disgruntled Judge(拓展欧几里德)
查看>>
JS 原生ajax写法
查看>>
Composer管理PHP依赖关系
查看>>
React.js学习笔记之JSX解读
查看>>
我所了解的Libevent和SEDA架构
查看>>
Socket编程问题小记
查看>>
基于Flask-Angular的项目组网架构与部署
查看>>
一张图道尽程序员的出路
查看>>