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 相关文章推荐
JS event使用方法详解
Apr 28 Javascript
js form 验证函数 当前比较流行的错误提示
Jun 23 Javascript
JavaScript prototype属性深入介绍
Nov 27 Javascript
JS分页控件 可用于无刷新分页
Jul 23 Javascript
JavaScript显示表单内元素数量的方法
Apr 02 Javascript
使用Object.defineProperty实现简单的js双向绑定
Apr 15 Javascript
D3.js实现直方图的方法详解
Sep 25 Javascript
浅析javascript中的Event事件
Dec 09 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
详解webpack+express多页站点开发
Dec 22 Javascript
redux-saga 初识和使用
Mar 10 Javascript
浅谈Node.js 沙箱环境
May 15 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
全国FM电台频率大全 - 14 江西省
2020/03/11 无线电
PIGCMS 如何关闭聊天机器人
2015/02/12 PHP
在Laravel5中正确设置文件权限的方法
2019/05/22 PHP
自己写了一个展开和收起的多更能型的js效果
2013/03/05 Javascript
JavaScript创建对象的方式小结(4种方式)
2015/12/17 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
2016/08/10 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
2016/10/21 Javascript
微信小程序图片选择区域裁剪实现方法
2017/12/02 Javascript
react-native封装插件swiper的使用方法
2018/03/20 Javascript
js的对象与函数详解
2019/01/21 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
2019/02/28 jQuery
Vue实现指令式动态追加小球动画组件的步骤
2020/12/18 Vue.js
python中字典dict常用操作方法实例总结
2015/04/04 Python
python实现验证码识别功能
2018/06/07 Python
Python requests获取网页常用方法解析
2020/02/20 Python
Python Opencv 通过轨迹(跟踪)栏实现更改整张图像的背景颜色
2020/03/09 Python
python实现一次性封装多条sql语句(begin end)
2020/06/06 Python
Python基于wordcloud及jieba实现中国地图词云图
2020/06/09 Python
python爬虫用scrapy获取影片的实例分析
2020/11/23 Python
HTML5 Canvas实现烟花绽放特效
2016/03/02 HTML / CSS
英国最大的在线蜡烛商店:Candles Direct
2019/03/26 全球购物
在校生党员自我评价
2013/09/25 职场文书
技术总监岗位职责
2013/12/05 职场文书
大学生的应聘自我评价
2013/12/13 职场文书
实用的简历自我评价
2014/03/06 职场文书
药剂专业自荐信范文
2014/04/16 职场文书
学校志愿者活动总结
2014/06/27 职场文书
2015年度物流工作总结
2015/04/30 职场文书
文艺演出主持词
2015/07/01 职场文书
会议室管理制度范本
2015/08/06 职场文书
2016教师六五普法学习心得体会
2016/01/21 职场文书
《卧薪尝胆》读后感3篇
2019/12/26 职场文书
浅谈@Value和@Bean的执行顺序问题
2021/06/16 Java/Android
nginx共享内存的机制详解
2022/03/21 Servers
Docker官方工具docker-registry案例演示
2022/04/13 Servers
基于Python实现西西成语接龙小助手
2022/08/05 Golang