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 ...
随机推荐
- Ubuntu 16.04下更新Atom
在Ubuntu下Atom好像不会自动更新,但是可以通过这些方法去实现: 1.安装插件:https://atom.io/packages/up2date 2.使用apt源更新: sudo apt-get ...
- linux 文件属性、权限、所有人、所属组
Linux命令行模式下,文件还是需要通过ls -l来查看 可以通过ll查看长文件,会有如下类型显示drwxr-xr-x 2 root root 4096 Nov 10 2010 conf 总共有7 ...
- SolidEdge 装配体中如何快速的搞定一个面上所有螺丝 如何在装配体上进行阵列
1 点击"规则排列" 选择要排列的螺丝 2 选择被规则排列的架子 3 选择所有的圆孔(鼠标滑到任意圆孔位置,左键单击即可选中所有圆孔) 4 选择参考的基准孔(已经上了螺 ...
- iOS开发之UITabBarController和UICollectionView的使用
这一篇要记录的是iOS开发中UITabBarController控件和UICollectionView控件的使用.APP跑起来之后的效果例如以下图: watermark/2/text/aHR0cDov ...
- flex 操作xml 实现增删改查 .
一 在介绍Flex中操作XML之前,首先简单介绍下XML中的基本术语. 元素:XML中拥有开始标签和结束标签的这一块称为“元素” 节点:把XML元素与文本结合起来统称为节点 根节点:位于整 ...
- 走入asp.net mvc不归路:[3]创建控制器
实际上,控制器就是一个类,一个继承自Controller的类.正常创建一个Controller即可,而问题在于asp.net mvc提供了一套便捷的方法,在创建一个Controller时,可以自动创建 ...
- mtk机型的一次救砖经历
在recovery里清除了data,cache,system三个分区,没有刷机,重启到bootloader,准备另刷recovery. 有急事走开了,回来时发现手机黑屏,无论什么组合键都没反应,以为是 ...
- mac下Tomcat的安装
转自:http://blog.csdn.net/liuyuyefz/article/details/8072485 对于Apache Tomcat 估计很多童鞋都会,那么今天就简单说下在mac上进行t ...
- WPF使用HierarchicalDataTemplate绑定Dictionary生成TreeView
Dictionary中的<string, CustomeType>CustomeType是一个集合,将其绑定生成一棵树,树的第一层节点是Dictionary的Key,第二层是Custome ...
- Reveal查看任意app的高级技巧
本文转载至 http://blog.csdn.net/wbdwsqwwn/article/details/40476139 Reveal是一个很强大的UI分析工具,与其他几个功能相近的工具(比如Pon ...