显式label
•也就是说为label元素添加for属性,其属性值与表单控件的id属性值一致。
•重置和提交按钮(<input type="reset"/> 、<input type="submit"/>), 图片按钮(<input type="img"/>)以及脚本按钮 (<button></button>)不用使用显式label,因为它们已经有了隐式标签,如value 和 alt 属性值,button元素的内容。
<label for="firstname">First name:</label><input type="text" name="firstname" id="firstname" tabindex="1" />
隐式label
•根据HTML 4.01 规范, 通过label 元素包裹 表单控件和label文本可创建”隐式label”。
•由于一些浏览器(IE6)不支持隐式label,WCAG2.0不建议使用。
<label>First name: <input type="text" name="firstname" /></label>
另外一种写法,即上面两种方法的结合:
<label for="firstname">First name:
<input type="text" name="firstname" id="firstname" tabindex="1" /></label>
两者的区别
使用屏幕阅读器NVDA和IE9测试发现,屏幕阅读器用户听到的提示内容是不同的:
•显式label写法:“fFirst name: 编辑框 空白(或内容)”
•隐式label写法:“First name: 文本 First name: 编辑框 空白(或内容)”–两种方法一致,不过最后一种写法在所有浏览器下点击label都无法激活表单控件(笔者demo手误,已更改),强烈不推荐这种写法。
可以看出,nvda会重复label文本内容,屏幕阅读器用户更容易理解显式label写法的提示。
查看demo
更新:今日看到 HTML5 Accessibility Chops: form control labeling 一文
(http://www.html5accessibility.com/tests/form-labels.html)
做了同样的测试,作者测试了更多的浏览器和屏幕阅读器,查看测试demo页和结果页,得到了同样的结论:使用for 和 id 并且表单控件不放在label元素内是最健壮的方法。
分享到:
相关推荐
如何显式和隐式地链接dll,test.dll作为链接的对象,简单的举例
Oracle显式游标和隐式游标.doc
为什么要写显式启动与隐式启动Activity,Android的Acitivity启动大致有两种方式:显式启动与隐式启动,下面分别介绍
显式和隐式、过滤器intent的使用,欢迎有需要的朋友下载!
02_显式原型与隐式原型.html
笔记,csdn搜可以搜到,自己的总结。
【GAMES101】作业8 显式/半隐式欧拉与Verlet方法模拟绳子运动
隐式调用dll和显式调用dll,并做了demo在同一个solution下编译就可以尝试,通过宏来控制隐式和显示调用。显示调用即使dll改名依然能够获取函数地址,通过函数指针来使用。
activity显式隐式跳转,提供显式隐式跳转方式代码
内容概述:SQL Server数据库相关内容,对应张磊著《SQL Server数据库应用技术项目化教程》中166页(3)ROLLBACK TRANSACTION将显式事务或隐式事务回滚到事务的结束所对应的源码。代码经个人运行后无误,如果下载后运行...
abaqus显示和隐式算法的差别.pdf
c语言编写阿当姆斯显式与隐式,例子来源于李庆扬第五版数值分析书
资源包括一个创建DLL的工程,一个使用DLL的工程,共俩个工程。...附带一个说明文档,分为静态(隐式)链接方式和动态(显式)链接方式详细介绍了DLL的创建以及使用方式。 简单明了,一学包会,不坑爹。
C++ 多个类的DLL封装以及隐式链接和显式链接2种方法调用
BookCrossing数据集(包含278858个用户对271379本书进行的评分,包括显式和隐式的评分。本数据集主要包含2中文件格式,sql和csv)
在质量弹簧阻尼器系统上比较隐式与显式欧拉。 隐式方法基于以下论文: D. Baraff 和 A. Witkin,“布料模拟中的大步骤”,第 25 届计算机图形和交互技术年会论文集 - SIGGRAPH '98,1998,第 43-54 页。
微分方程一维抛物热传导方程向前向后欧拉C-N...显式欧拉,隐式欧拉,梯形公式,改进欧拉 五点差分,九点差分 差分格式,紧差分格式 直拿,只有pdf版方法说明 word版 公式纯手打 数值例子有数据图解分析 含源码和流程图
偏微分方程数值解 双曲型方程-显示与隐式 源代码及算法原理简介 编程语言:Matlab 参考书籍《偏微分方程数值解》