label标签的可访问性
与表单元素关联的方法(IE6下label
标签包裹控件的方法是不顶用的):
1 使用for和id关联控件
<p><label for="test">标签</label> <input name="input" type="text" id="test" /></p>
(一个控件可以支持多个label)
2 label标签包裹控件
<p><label>标签 <input name="input" type="text" /></label></p>
3 双管齐下
<p><label for="test2">标签 <input name="input" type="text" id="test2" /></label></p> 使用for
和id
找到控件元素的方法要比将控件放在label
标签内的健壮性好很多。
同时他还发现使用aria-labelledby
属性跨浏览器和辅助技术的健壮性要比使用标准的控件元素放在label
标签下的方法强。 在浏览器修复他们的些可访问性问题之前,如果你希望你的控件可以被辅助技术理解,建议使用for + id
方法,而不要因为懒得蛋疼乳酸,直接把控件元素套在label
标签之下。也不要使用看上去更保险的“双管齐下”的方法。
label标签的可访问性的更多相关文章
- 说说HTML5中label标签的可访问性问题——张鑫旭
一.开篇叨叨 一般稍微有些经验的页面制作人员都知道label标签可以优雅地扩大表单控件元素的点击区域,例如,单纯的单选框点击区域就鼻屎那么大的地方,经常会点不到位置.因此,label标签的使用对于提高 ...
- label标签的可访问性问题
label标签可以优雅地扩大表单控件元素的点击区域.例如,单纯的单选框点击区域就鼻屎那么大的地方,经常会点不到位置.因此,label标签的使用对于提高页面的可用性可访问性是很有帮助的. 其实,它的样子 ...
- web标准的可用性和可访问性
在Web前端开发界,有三个词经常被提及:可用性(Usability).可访问性(Accessibility)和可维护性(Maintainability). 可用性指的是:产品是否容易上手,用户能否完成 ...
- 可点击的icon按钮 无障碍 ARIA 可访问性
最简单: <input type="image" src="email.png" width="14" height="14 ...
- 什么是web标准、可用性、可访问性
前言:大家不难发现,只要是招聘UED相关的岗位,如前端开发工程师.交互设计师.用户研究员甚至视觉设计师,一般都对web标准.可用性和可访问性的理解有要求.那么到底什么是web标准.可用性.可访问性呢? ...
- web标准,可用性和可访问性
web标准,简单的说,是指html,css,JavaScript三者的分离. 网页由三部分组成:结构,表现和行为.对应的标准分为三方面: 1.结构化标准语言XHTML和XML2.表现标准语言主要包括c ...
- web标准、可用性、可访问性
前言:大家不难发现,只要是招聘UED相关的岗位,如前端开发工程师.交互设计师.用户研究员甚至视觉设计师,一般都对web标准.可用性和可访问性的理解有要求.那么到底什么是web标准.可用性.可访问性呢? ...
- 对Web标准的理解。可用性和可访问性
一Web标准 简单的说,就是HTML.CSS.JavaScript这三者分离.WEB标准不是某一个标准,而是一系列标准的集合.网页主要由三部分组成:结构(Structure).表现(Presentat ...
- 第7天:input和label标签
今天学的不多,就只学了表单元素中的input和label标签.搬了房子,收拾了一下东西,太累了,所以没有学很多.明天还上班,今天就先到这. 一.input input标签type属性有以下几个:tex ...
随机推荐
- IDEA中lombok插件的安装
1.在pom.xml中添加依赖 <dependency> <groupId>org.projectlombok</groupId> <artifactId&g ...
- Map与object的区别
Map 对象保存键值对.任何值(对象或者原始值) 都可以作为一个键或一个值. 语法 new Map([iterable]) 参数 iterable Iterable 可以是一个数组或者其他 itera ...
- ftp服务器调用出错
因工作需要,需从FTP服务器上下载文件,本地测试OK,服务器上在FTP服务器连接之后卡住,没有异常和提示信息,在打印FTP命令之后,显示:150 Opening data channel for fi ...
- 转: 在CentOS 6.X 上面安装 Python 2.7.X
转:https://ruiaylin.github.io/2014/12/12/python%20update/ 评注: yum -y update //这个更新太坑了,1120更新包...想死的心都 ...
- uml精粹——10.状态机图
10.状态机图state machine diagram 状态机图是常见的描写叙述一个系统行为的技术. 在面向对象的方法中,为单个类绘制一个状态机图来展示单个对象的生命周期行为. 见图10.1 图 ...
- binary-tree-postorder-traversal——二叉树后续遍历
Given a binary tree, return the postorder traversal of its nodes' values. For example:Given binary t ...
- HDU1114 Piggy-Bank 【全然背包】
Piggy-Bank Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total ...
- Arduino 网络时钟client
升级! 添加了12h/24h 的开关,还有标准/ 夏令时开关!见步骤7 & 步骤8. 你是否曾想要一个和办公室时间来源全然准确的表? 这就有一个网络的办公时间server,你能够根据它并同步你 ...
- JavaScript中label语句的使用
之前在读<javascript高级程序设计>的时候,看到过lable语句,当时看完感觉好像很少用到,但是今天,刚好在项目终于到了合适的场景,合理使用label可以大幅度优化性能. 首先来简 ...
- Iterator && Iterable Collection && Map
Java集合类库将集合的接口与实现分离.同样的接口,可以有不同的实现. Java集合类的基本接口是Collection接口.而Collection接口必须实现Iterable接口. 以下图表示集合框架 ...