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

 更新时间:2017年01月20日 16:09:08   作者:家猪难养  
这篇文章主要介绍了bootstrap中的 form表单属性role="form"的作用详解,非常不错,具有参考借鉴价值,需要的朋友参考下吧

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"的作用详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • JS基于Ajax实现的网页Loading效果代码

    JS基于Ajax实现的网页Loading效果代码

    这篇文章主要介绍了JS基于Ajax实现的网页Loading效果代码,通过时间函数结合数学运算实现页面样式的动态变换技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • js控制滚动条滚动的两种简单方法

    js控制滚动条滚动的两种简单方法

    这篇文章主要给大家介绍了关于js控制滚动条滚动的两种简单方法,通过JavaScript可以直接控制滚动条的位置,从而达到锁定滚动条的效果,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2023-07-07
  • BootStrap的JS插件之轮播效果案例详解

    BootStrap的JS插件之轮播效果案例详解

    Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。这篇文章主要介绍了BootStrap的JS插件之轮播效果案例详解的相关资料,需要的朋友可以参考下
    2016-05-05
  • JavaScript高级程序设计 阅读笔记(十七) js事件

    JavaScript高级程序设计 阅读笔记(十七) js事件

    IE中是冒泡型事件,即从最特定的事件目标到最不特定的事件目标
    2012-08-08
  • JavaScript使用setInterval()函数实现简单轮询操作的方法

    JavaScript使用setInterval()函数实现简单轮询操作的方法

    这篇文章主要介绍了JavaScript使用setInterval()函数实现简单轮询操作的方法,以实例形式分析了轮询操作的原理与javascript实现技巧,需要的朋友可以参考下
    2015-02-02
  • 解决JS外部文件中文注释出现乱码问题

    解决JS外部文件中文注释出现乱码问题

    中文乱码在Java Web开发中经常出现,这是由于不同的部分编码不一样造成的,一般在开发中,我们把所有能设编码的地方,全部设置成UTF-8,但是有时候还是会出现乱码的情况。下面通过本文给大家分享JS外部文件中文注释出现乱码的解决方案,一起看看吧
    2017-07-07
  • Bootstrap作品展示站点实战项目2

    Bootstrap作品展示站点实战项目2

    这篇文章主要为大家分享了Bootstrap作品展示站点实战项目,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • JavaScript分水岭CommonJS对比ES模块分析

    JavaScript分水岭CommonJS对比ES模块分析

    这篇文章主要为大家介绍了JavaScript分水岭CommonJS对比ES模块分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-11-11
  • 不使用浏览器运行javascript代码的方法

    不使用浏览器运行javascript代码的方法

    用js写一段小程序,但是又觉得使用浏览器去运行挺麻烦的,下面为大家介绍下如何使用java程序调用javascript程序,有类似需求的朋友可以参考下哈,希望对大家有所帮助
    2013-07-07
  • 一文教会你从零开始画echarts地图

    一文教会你从零开始画echarts地图

    ECharts是一个使用JavaScript实现的开源可视化库,涵盖各行业图表,满足各种需求,下面这篇文章主要给大家介绍了如何从零开始画echarts地图的相关资料,需要的朋友可以参考下
    2022-04-04

最新评论