与表单元素关联的方法(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>

使用forid找到控件元素的方法要比将控件放在label标签内的健壮性好很多。
同时他还发现使用aria-labelledby属性跨浏览器和辅助技术的健壮性要比使用标准的控件元素放在label标签下的方法强。 在浏览器修复他们的些可访问性问题之前,如果你希望你的控件可以被辅助技术理解,建议使用for + id方法,而不要因为懒得蛋疼乳酸,直接把控件元素套在label标签之下。也不要使用看上去更保险的“双管齐下”的方法。

label标签的可访问性的更多相关文章

  1. 说说HTML5中label标签的可访问性问题——张鑫旭

    一.开篇叨叨 一般稍微有些经验的页面制作人员都知道label标签可以优雅地扩大表单控件元素的点击区域,例如,单纯的单选框点击区域就鼻屎那么大的地方,经常会点不到位置.因此,label标签的使用对于提高 ...

  2. label标签的可访问性问题

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

  3. web标准的可用性和可访问性

    在Web前端开发界,有三个词经常被提及:可用性(Usability).可访问性(Accessibility)和可维护性(Maintainability). 可用性指的是:产品是否容易上手,用户能否完成 ...

  4. 可点击的icon按钮 无障碍 ARIA 可访问性

    最简单: <input type="image" src="email.png" width="14" height="14 ...

  5. 什么是web标准、可用性、可访问性

    前言:大家不难发现,只要是招聘UED相关的岗位,如前端开发工程师.交互设计师.用户研究员甚至视觉设计师,一般都对web标准.可用性和可访问性的理解有要求.那么到底什么是web标准.可用性.可访问性呢? ...

  6. web标准,可用性和可访问性

    web标准,简单的说,是指html,css,JavaScript三者的分离. 网页由三部分组成:结构,表现和行为.对应的标准分为三方面: 1.结构化标准语言XHTML和XML2.表现标准语言主要包括c ...

  7. web标准、可用性、可访问性

    前言:大家不难发现,只要是招聘UED相关的岗位,如前端开发工程师.交互设计师.用户研究员甚至视觉设计师,一般都对web标准.可用性和可访问性的理解有要求.那么到底什么是web标准.可用性.可访问性呢? ...

  8. 对Web标准的理解。可用性和可访问性

    一Web标准 简单的说,就是HTML.CSS.JavaScript这三者分离.WEB标准不是某一个标准,而是一系列标准的集合.网页主要由三部分组成:结构(Structure).表现(Presentat ...

  9. 第7天:input和label标签

    今天学的不多,就只学了表单元素中的input和label标签.搬了房子,收拾了一下东西,太累了,所以没有学很多.明天还上班,今天就先到这. 一.input input标签type属性有以下几个:tex ...

随机推荐

  1. IDEA中lombok插件的安装

    1.在pom.xml中添加依赖 <dependency> <groupId>org.projectlombok</groupId> <artifactId&g ...

  2. Map与object的区别

    Map 对象保存键值对.任何值(对象或者原始值) 都可以作为一个键或一个值. 语法 new Map([iterable]) 参数 iterable Iterable 可以是一个数组或者其他 itera ...

  3. ftp服务器调用出错

    因工作需要,需从FTP服务器上下载文件,本地测试OK,服务器上在FTP服务器连接之后卡住,没有异常和提示信息,在打印FTP命令之后,显示:150 Opening data channel for fi ...

  4. 转: 在CentOS 6.X 上面安装 Python 2.7.X

    转:https://ruiaylin.github.io/2014/12/12/python%20update/ 评注: yum -y update //这个更新太坑了,1120更新包...想死的心都 ...

  5. uml精粹——10.状态机图

    10.状态机图state machine diagram   状态机图是常见的描写叙述一个系统行为的技术. 在面向对象的方法中,为单个类绘制一个状态机图来展示单个对象的生命周期行为. 见图10.1 图 ...

  6. binary-tree-postorder-traversal——二叉树后续遍历

    Given a binary tree, return the postorder traversal of its nodes' values. For example:Given binary t ...

  7. HDU1114 Piggy-Bank 【全然背包】

    Piggy-Bank Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total ...

  8. Arduino 网络时钟client

    升级! 添加了12h/24h 的开关,还有标准/ 夏令时开关!见步骤7 & 步骤8. 你是否曾想要一个和办公室时间来源全然准确的表? 这就有一个网络的办公时间server,你能够根据它并同步你 ...

  9. JavaScript中label语句的使用

    之前在读<javascript高级程序设计>的时候,看到过lable语句,当时看完感觉好像很少用到,但是今天,刚好在项目终于到了合适的场景,合理使用label可以大幅度优化性能. 首先来简 ...

  10. Iterator && Iterable Collection && Map

    Java集合类库将集合的接口与实现分离.同样的接口,可以有不同的实现. Java集合类的基本接口是Collection接口.而Collection接口必须实现Iterable接口. 以下图表示集合框架 ...