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 ...
随机推荐
- 10.Java web—JavaBean
定义一个类,然后在jsp页面通过<jsp:useBean>标签调用 重点是类属性名要起得规则,一般是setXXX getXXXX 新建一个类UserInfo public class U ...
- uwsgi 热启动
uwsgi文件每次启动都要kill进程,这样非常麻烦,理想的情况是须要改动文件就自己主动生效,经查阅资料.发现uwsgi是自带该功能的,该功能的配置节例如以下 <uwsgi> <py ...
- MapReduce编程实战之“调试”和"调优"
本篇内容 在上一篇的"初识"环节,我们已经在本地和Hadoop集群中,成功的执行了几个MapReduce程序,对MapReduce编程,已经有了最初的理解. 在本篇文章中,我们对M ...
- 跟着实例学习设计模式(7)-原型模式prototype(创建型)
原型模式是创建型模式. 设计意图:用原型实例指定创建对象的类型,并通过拷贝这个原型来创建新的对象. 我们使用构建简历的样例的类图来说明原型模式. 类图: 原型模式主要用于对象的复制.它的核心是就是类图 ...
- C#如何实现挂机锁
首先在主窗体中设置一个子窗体的实例,然后当点击挂机之后,隐藏当前窗体,同时显示子窗体. 把子窗体的背景窗体设置如下属性(主要是背景随便改成一个图片,然后FormBorderStyle改成None, ...
- pcapReader——源代码分析
一.简单介绍 pcapReader是ndpi开源中的一个example. 大家能够从<ndpi directory>/example/pcapReader.c中找到它的源码.通过pcapl ...
- [unity3d]unity平台的预处理
在开发中,特别是unity的跨平台中,我们常常会在各个平台游走,如安卓版,苹果版,PC版.......在此不同的平台上,有可能我们须要做不同的操作.然而我们就能够用unity的自带的平台宏定义方式来做 ...
- 【转载】Http协议与TCP协议简单理解后续
写了这么长时间的代码,发现自己对TCP/IP了解的并不是很透彻.虽然会用C#的HttpClient类来进行网络编程,也可以使用Chrome的开发者工具来检测每一次的HTTP请求的报文头与报文体,也知道 ...
- Intel CPU Microarchitecture
http://en.wikipedia.org/wiki/Intel_Tick_Tock Atom Roadmap[16] Fabrication process Microarchitectur ...
- ubuntu 用shell脚本实现将当前文件夹下全部文件夹中的某一类文件复制到同一文件夹下
当前文件夹下有一些文件和文件夹,当中每一个文件夹里都有若干.txt文件. 如今要求在当前文件夹创建一个新文件夹all,且将那些文件夹全部.txt文件 都复制到文件夹all.在ubuntu12.04的s ...