首页 web前端 html教程 bootstrap中的 form表单属性role="form"有什么作用

bootstrap中的 form表单属性role="form"有什么作用

Feb 20, 2017 am 11:33 AM

html 里面的 role 本质上是增强语义性,当现有的HTML标签不能充分表达语义性的时候,就可以借助role来说明。通常这种情况出现在一些自定义的组件上,这样可增强组件的可访问性、可用性和可交互性。
role的作用是描述一个非标准的tag的实际作用。比如用p做button,那么设置p 的 role=“button”,辅助工具就可以认出这实际上是个button
比如,

<p role="checkbox" aria-checked="checked"></p>
登录后复制

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

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

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

<p role = "p"></p>
登录后复制

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

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

更多bootstrap中的 form表单属性role="form"有什么作用相关文章请关注PHP中文网!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章标签

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验? 公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验? Mar 04, 2025 pm 12:32 PM

公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?

如何使用HTML5表单验证属性来验证用户输入? 如何使用HTML5表单验证属性来验证用户输入? Mar 17, 2025 pm 12:27 PM

如何使用HTML5表单验证属性来验证用户输入?

如何高效地在网页中为PNG图片添加描边效果? 如何高效地在网页中为PNG图片添加描边效果? Mar 04, 2025 pm 02:39 PM

如何高效地在网页中为PNG图片添加描边效果?

HTML5中跨浏览器兼容性的最佳实践是什么? HTML5中跨浏览器兼容性的最佳实践是什么? Mar 17, 2025 pm 12:20 PM

HTML5中跨浏览器兼容性的最佳实践是什么?

< meter>的目的是什么。 元素? < meter>的目的是什么。 元素? Mar 21, 2025 pm 12:35 PM

< meter>的目的是什么。 元素?

< iframe>的目的是什么。 标签?使用时的安全考虑是什么? < iframe>的目的是什么。 标签?使用时的安全考虑是什么? Mar 20, 2025 pm 06:05 PM

< iframe>的目的是什么。 标签?使用时的安全考虑是什么?

< datalist>的目的是什么。 元素? < datalist>的目的是什么。 元素? Mar 21, 2025 pm 12:33 PM

< datalist>的目的是什么。 元素?

我如何使用html5< time> 元素以语义表示日期和时间? 我如何使用html5< time> 元素以语义表示日期和时间? Mar 12, 2025 pm 04:05 PM

我如何使用html5< time> 元素以语义表示日期和时间?

See all articles