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 ...
随机推荐
- Linux下文件操作命令cat(转)
语法格式: cat [-AbeEnstTuv] [--help] [--version] fileName 参数说明: -n 或 --number:由 1 开始对所有输出的行数编号. -b 或 --n ...
- Jquery表单序列化和json操作
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- react+flask+antd
待学习: 1.https://www.cnblogs.com/jlj9520/p/6625535.html 2.http://python.jobbole.com/87112/ 3.
- mysql修改删除列,删除有外键依赖的列
–重命名表rename table t_softwareport to software_port; –建立外键alter table software_port add constraint fk_ ...
- Android studio 导入githubproject
Blog From:http://blog.csdn.net/onlysnail/article/details/45115093 从github下载两个开源项目: PagerSlidingTabSt ...
- HTML小知识点积累
1.怎样让heigth:100%起效? 有时候我们设置heigth:100%,想让当前控件铺满整个屏幕,可是非常少情况下这个属性能达到我们想要的效果,这是为什么呢? 而依据W3C的规范.百分比 ...
- atitit. hb 原生sql跨数据库解决原理 获得hb 数据库类型执行期获得Dialect
atitit. hb 原生sql跨数据库解决原理 获得hb 数据库类型执行期获得Dialect #-----原理 Hibernate 执行期获得Dialect 2010-07-28 12:59 ...
- nc和telnet配合使用
nc -l 9932 -c 用nc监听9932端口 telnet 180.150.184.115 29933 telnet 29932 端口
- Json——使用Json jar包实现Json字符串与Java对象或集合之间的互相转换
总结一下利用Json相关jar包实现Java对象和集合与Json字符串之间的互相转换: 1.创建的User类: package com.ghj.packageofdomain; public clas ...
- Katalon
Katalon---一款好用的selenium自动化测试插件 selenium框架是目前使用较广泛的开源自动化框架,一款好的.基于界面的录制工具对于初学者来说可以快速入门:对于老手来说可以提高开发自动 ...