Html/Css_ 拾遗 role属性的作用
来源:互联网 发布:剑网三检查网络 编辑:程序博客网 时间:2024/05/16 19:31
原文地址:http://blog.csdn.net/annip/article/details/53455226
一.什么是role属性
role属性作用是告诉Accessibility类应用(比如屏幕朗读程序,为盲人提供的访问网络的便利程序),这个元素所扮演的角色,主要是供残疾人使用。使用role可以增强文
本的可读性和语义化。
在html5元素内,标签本身就是有语义的,因此role是不必添加的,至少是不推荐的,但是bootstrap的案例内很多都是有类似的属性和声明的,目的是为了兼容老版本的
浏览器(用户代理),如果你的代码使用了html5标签,并且不准备支持老版本的浏览器,不妨不使用role标签。
二.什么时候使用role?
role的发挥的作用是供有障碍的人士使用,但这并不意味着每个标签都需要增加role属性,因为对于正常的文本本来就可读。role属性的应用主要是表单,比如输入密码,
对于正常人可以用placaholder提示输入密码,但是对于残障人士是无效的,这个时候就需要role了。另外,在老版本的浏览器中,由于不支持HTML5标签,所以有必要使用
role属性。
三.role的属性值
具体参考w3c发布的WAI-ARIA 1.0 User Agent Implementation Guide中的role Map部分 https://www.w3.org/TR/wai-aria/roles
四.示例
示例一:
<div role="checkbox" aria-checked="checked"></div>告诉屏幕阅读器,此处有一个复选框,且已经被选中。
示例二:
<div class="container">
<button class="btn">基础按钮</button>
<a class="btn" role="button">A标签按钮</a>
<input type="button" class="btn" value="input标签"/>
</div>
使用bootstrap布局,用role 给 a标签增加明确的语义。
- Html/Css_ 拾遗 role属性的作用
- HTML中的role属性
- HTML中的role属性
- bootstrap中form表单属性role="form"的作用
- Html+Css_利用img 的usemap属性 和 map 以及 area(list) 对图像敏感区域定位
- Html+CSS_居中布局的总结
- HTML rel属性的作用
- [HTML]CSS_文字特效
- CSS_属性入门
- [HTML]CSS_利用CSS控制表格的交替颜色
- html中,meta 的属性和作用
- HTML标签一些属性的作用
- HTML meta标签各属性的作用
- html拾遗
- html拾遗
- python拾遗-1 字符串的属性操作
- html:form标签的focus属性的作用
- html的标签中unselectable=on属性的作用
- The most popular color of balloon
- 购买骑行装备列表(第三次)
- Bootstrap-超大屏幕(Jumbotron)
- BZOJ4766 文艺计算姬(生成树)(公式题)
- uboot下init_sequence_f函数之reserve_fdt
- Html/Css_ 拾遗 role属性的作用
- 线程生命周期状态图
- Thinkphp在iis环境下中文参数乱码
- 项目连续几天突然挂掉
- Prime Cuts UVA 406
- 科克曼女生问题
- 使用RecyclerView展示GrideView效果
- A
- 有趣的电脑技巧_电脑常用技巧