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 相关文章推荐
使用JavaScript switch case 另类写法
Mar 14 Javascript
js DataSet数据源处理代码
Mar 29 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
Sep 09 Javascript
jQuery实现移动 和 渐变特效的点击事件
Feb 26 Javascript
javascript实现点击提交按钮后显示loading的方法
Jul 03 Javascript
Javascript之Date对象详解
Jun 07 Javascript
原生JS实现匀速图片轮播动画
Oct 18 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
Dec 05 Javascript
Bootstrap3 多选和单选框(checkbox)
Dec 29 Javascript
webpack 开发和生产并行设置的方法
Nov 08 Javascript
js中async函数结合promise的小案例浅析
Apr 14 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
Jul 13 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
PHP $_FILES函数详解
2011/03/09 PHP
PHP提示Notice: Undefined variable的解决办法
2012/11/24 PHP
php中将字符串转为HTML的实体引用的一个类
2013/02/03 PHP
PHP中读取照片exif信息的方法
2014/08/20 PHP
php输入流php://input使用浅析
2014/09/02 PHP
PHP实现支持GET,POST,Multipart/form-data的HTTP请求类
2014/09/24 PHP
php按字符无乱码截取中文的方法
2015/03/27 PHP
ThinkPHP3.2.3框架Memcache缓存使用方法实例总结
2019/04/15 PHP
Laravel框架实现定时Task Scheduling例子
2019/10/22 PHP
javascript 弹出层组件(升级版)
2011/05/12 Javascript
兼容主流浏览器的JS复制内容到剪贴板
2014/12/12 Javascript
jQuery插件jRumble实现网页元素抖动
2015/06/05 Javascript
怎么限制input的text里输入的值只能是数字(正则、js)
2016/05/16 Javascript
详解jquery easyui之datagrid使用参考
2016/12/05 Javascript
Vue声明式渲染详解
2017/05/17 Javascript
vue实现页面加载动画效果
2017/09/19 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
2017/10/06 Javascript
vue中实现左右联动的效果
2018/06/22 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
2018/08/07 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
2020/04/29 Javascript
Python网络爬虫出现乱码问题的解决方法
2017/01/05 Python
使用pip发布Python程序的方法步骤
2018/10/11 Python
Pytorch 计算误判率,计算准确率,计算召回率的例子
2020/01/18 Python
Django基于客户端下载文件实现方法
2020/04/21 Python
台湾深度自由行旅游平台:Tripbaa趣吧
2017/10/10 全球购物
Johnson Fitness澳大利亚:高级健身器材
2021/03/16 全球购物
植树节口号
2014/06/21 职场文书
领导班子作风建设年个人整改措施
2014/09/29 职场文书
工作失职检讨书(精华篇)
2014/10/15 职场文书
先进班组材料范文
2014/12/25 职场文书
2015年毕业生自荐信范文
2015/03/24 职场文书
2015年生产车间工作总结
2015/04/22 职场文书
2015年中秋晚会主持稿
2015/07/30 职场文书
军训后的感想
2015/08/07 职场文书
Python 读写 Matlab Mat 格式数据的操作
2021/05/19 Python
部分武汉产收音机展览
2022/04/07 无线电