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 ...
随机推荐
- nginx原配置
#原配置 server { listen ; server_name localhost; #charset koi8-r; #access_log logs/host.access.log main ...
- BS版代码生成器 简介
自用的代码生成器 核心:JdbcTemplate+freemarker 目前支持sqlserver和mysql 演示: 1.首界面 2.读数据库中的所有表 3.打开某数据库下的所有表.视图.存储过程 ...
- Android Studio一些常用的快捷键
光标移动和窗口切换:1.esc:光标从功能窗口回到编辑窗口 2.alt+num:打开指定的功能窗口,重复操作关闭该窗口. 3.alt+←→:切换编辑的文件. 4.ctrl+home/end:跳转到文件 ...
- Solidworks工程图 如何绘制向视图,辅助视图
先画一条垂直于视野方向的中心线 点击辅助视图,然后点选刚才的中心线即可生成向视图 对向视图的标准可以得到一些用其他方法不好标注的尺寸
- Python爬取韩寒所有新浪博客
接上一篇,我们依据第一页的链接爬取了第一页的博客,我们不难发现,每一页的链接就仅仅有一处不同(页码序号),我们仅仅要在上一篇的代码外面加一个循环,这样就能够爬取全部博客分页的博文.也就是全部博文了. ...
- 第8章4节《MonkeyRunner源代码剖析》MonkeyRunner启动执行过程-启动AndroidDebugBridge
上一节我们看到在启动AndroidDebugBridge的过程中会调用其start方法,而该方法会做2个基本的事情: 715行startAdb:开启AndroidDebugBridge 722-723 ...
- homebrew -v 或homebrew -doctor报错请检查 .bash_profile是否有误
homebrew -doctor报错: /usr/local/Library/Homebrew/global.rb:109:in `split': invalid byte sequence in U ...
- Robotium结果的收集和失败重跑
引用自 http://www.robotium.cn/archives/author/zered 测试用例: testsuite管理测试用例 测试结果的输出与收集? InstrumentationTe ...
- unity 3D Mesh网络模型,怎样将Constructer拖入场景??
下图中的将Constructer拖入场景,怎么拖入,不知道... 1.Constructer是一个什么东西?在 下图中没有看到这个名字的,于是乎,我就不知道该怎么办了...
- CVE-2015-7547漏洞分析从原因到利用到补丁(非常适合小白)【转】
本文转载自:http://blog.csdn.net/u012406115/article/details/72232535 一. 漏洞概述 CVE漏洞链接:http://www.cv ...