role="alert" 这个作用是什么呀
role原来是WAI-ARIA(the Accessible Rich Internet Applications Suite),
可帮助访问Web内容和Web应用有困难的用户进行访问的方法(比如用静态的(screen-reading technologies)浏览器浏览用Ajax技术制作的动态网页), 用途是帮助残疾人,尤其是需要依靠屏幕阅读器和不能使用鼠标的用户。应用role属性可以设计出更加友好的网站应用。
html5里面添加这个属性作为做辅助作用。(来自知乎)
对于残障人员浏览网页有点困难,所以我们可以将结构做得更好些(语义化更友好些):
<div class="progress">
<div class="progress-bar" style="width:40%;" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">40% Complete</span>
</div>
</div>
1、role属性作用:告诉搜索引擎这个div的作用是进度条。
2、aria-valuenow="40"属性作用:当前进度条的进度为40%。
3、aria-valuemin="0"属性作用:进度条的最小值为0%。
4、aria-valuemax="100"属性作用:进度条的最大值为100%。
可以在标签内删除,不影响最终样式的结果,只是作为帮助残障人士方便阅读