bootstrap中的 form表单属性role="form"的作用详解


Posted in Javascript onJanuary 20, 2017

html 里面的 role 本质上是增强语义性,当现有的HTML标签不能充分表达语义性的时候,就可以借助role来说明。通常这种情况出现在一些自定义的组件上,这样可增强组件的可访问性、可用性和可交互性。

role的作用是描述一个非标准的tag的实际作用。比如用div做button,那么设置div 的 role=“button”,辅助工具就可以认出这实际上是个button

比如,

<div role="checkbox" aria-checked="checked"></div>

辅助工具就会知道,这个div实际上是个checkbox的角色,为选中状态。

role是无障碍阅读,是给有阅读障碍的人设置的属性,有阅读障碍的人可以用读屏软件来解析,跟正常人没多大关系。可以不设置,不设置的话读屏软件就无法解析,有阅读障碍的人也就"看"不了了。

既然是个良好的编程习惯,那么是不是所有标签都写role比较好呢?
比如

<div role = "div"></div>

正常的文本本来就可以读,但是表单中有时候输入密码框前面并没有密码的提示,提示在框内用Placeholder写的,正常人知道这里输入密码,可是读不出来,这时候这个东西就起作用了。

属性role的存在,是为了告诉Accessibility类应用(比如屏幕朗读程序,为盲人提供的访问网络的便利程序),这是一个按钮。在html5元素内,标签本身就是有语义的,因此role是不必添加的,至少是不推荐的,但是bootstrap的案例内很多都是有类似的属性和声明的,目的是为了兼容老版本的浏览器(用户代理),如果你的代码使用了html5标签,并且不准备支持老版本的浏览器,不妨不使用role标签。

以上所述是小编给大家介绍的bootstrap中的 form表单属性role="form"的作用详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
div移动 输入框不能输入的问题
Nov 19 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
Oct 29 Javascript
jquery根据属性和index来查找属性值并操作
Jul 25 Javascript
js获取元素相对窗口位置的实现代码
Sep 28 Javascript
node.js中的fs.readSync方法使用说明
Dec 17 Javascript
AngularJs bootstrap搭载前台框架——基础页面
Sep 01 Javascript
详解vue组件化开发-vuex状态管理库
Apr 10 Javascript
AngularJS实现表单验证功能详解
Oct 12 Javascript
通过说明与示例了解js五种设计模式
Jun 17 Javascript
微信小程序实现张图片合成为一张并下载
Jul 16 Javascript
JavaScript多种滤镜算法实现代码实例
Dec 10 Javascript
vue实现div单选多选功能
Jul 16 Javascript
javascript容错处理代码(屏蔽js错误)
Jan 20 #Javascript
关于AngularJs数据的本地存储详解
Jan 20 #Javascript
html5 canvas 详细使用教程
Jan 20 #Javascript
canvas绘制万花筒效果(代码分享)
Jan 20 #Javascript
原生js实现网页顶部自动下拉/收缩广告效果
Jan 20 #Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
Jan 20 #Javascript
轻松理解Javascript变量的相关问题
Jan 20 #Javascript
You might like
SONY SRF-40W电路分析
2021/03/02 无线电
一棵php的类树(支持无限分类)
2006/10/09 PHP
PHP 数据库树的遍历方法
2009/02/06 PHP
有关php运算符的知识大全
2011/11/03 PHP
解析php框架codeigniter中如何使用框架的session
2013/06/24 PHP
通过chrome浏览器控制台(Console)进行PHP Debug的方法
2016/10/19 PHP
关于php几种字符串连接的效率比较(详解)
2017/02/22 PHP
laravel migrate初学常见错误的解决方法
2017/10/11 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
HR vs CL BO3 第一场 2.13
2021/03/10 DOTA
Jquery中getJSON在asp.net中的使用说明
2011/03/10 Javascript
javascript变量作用域使用中常见错误总结
2013/03/26 Javascript
js的[defer]和[async]属性
2014/11/24 Javascript
javascript每日必学之循环
2016/02/19 Javascript
浅谈js中的延迟执行和定时执行
2016/05/31 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
2016/12/27 Javascript
JavaScript使用readAsDataURL读取图像文件
2017/05/10 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
2017/07/24 Javascript
基于jQuery的表单填充实例
2017/08/22 jQuery
浅谈Vue下使用百度地图的简易方法
2018/03/23 Javascript
详解Require.js与Sea.js的区别
2018/08/05 Javascript
Js实现粘贴上传图片的原理及示例
2020/12/09 Javascript
php使用递归与迭代实现快速排序示例
2014/01/23 Python
使用Python对IP进行转换的一些操作技巧小结
2015/11/09 Python
Python设计足球联赛赛程表程序的思路与简单实现示例
2016/06/28 Python
python实现机器学习之多元线性回归
2018/09/06 Python
Python编程深度学习计算库之numpy
2018/12/28 Python
python数字类型math库原理解析
2020/03/02 Python
Oakley官网:运动太阳镜、雪镜和服装
2016/09/30 全球购物
美国购买舞会礼服网站:Couture Candy
2019/12/29 全球购物
莫斯科大型旅游休闲商品超市:Camping.ru
2020/09/16 全球购物
教师找工作推荐信
2013/11/23 职场文书
四风问题个人自查剖析材料思想汇报
2014/09/21 职场文书
社区五一劳动节活动总结
2015/02/09 职场文书
男生贾里读书笔记
2015/06/30 职场文书
关于企业的执行力标语大全
2020/01/06 职场文书